<!--摇杆  -->

<template>

  <div class="map-container" style="height:100%;">
    <div v-loading="loading"
    element-loading-text="服务中断，重连中…"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
     class="map-container" style="height:100%;">
    <div id="map-container" style="height:200px;">
      <div class="trail-box" style="paddingLeft:1px">

    <!-- <el-form ref="form" label-width="70px" style=" z-index:9999;border:1px solid black;padding:10px;color: #000;  background-color:white ;margin-left:130px;margin-top: 20px; ">
      <el-form-item label="已选股道">
        <el-text>{{lines_list}}</el-text>
      </el-form-item>
      <el-form-item label="围栏类型">
        <el-select v-model="fen_lists" style="padding-right:0px;width:120px">
          <el-option :label="`请选择围栏类型`" :value="1"></el-option>
          <el-option v-for="item in fen_list" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="postTrack()">提交</el-button>
        
      </el-form-item>
    </el-form> -->
<!-- <el-switch style="background-color: white; z-index:9999;width: 150px;height: 30px;padding:10px;margin-left:65px;margin-top: 15px;"
    :value="switch_status"
    active-color="green"
    active-text="跟踪"
    :active-value=0
    inactive-color="grey"
    inactive-text="取消"
    :inactive-value=1
    @change="handleStatusChange(switch_status)"
></el-switch> -->
        








          <button style="{width:30px;height:30px;top: 10px;position: fixed;right: 10px;left:auto;z-index:9951;}" @click="checkversion=true" >
            <img style="width: 20px;" src="../../assets/images/map/info.svg"> 
          </button>

          <el-dialog :visible.sync="checkversion" :append-to-body="true">
            版本号： V1.000.010.00
          </el-dialog>




          <button class="position-container" @click="updatestate" style="z-index:9951;">
            <img src="../../assets/images/map/huidaodangqian.png"> 
          </button>
          <!-- 动态渲染弹出框 -->
<!-- <div v-drag  v-for="devOne in devDialogs" :key="devOne.devCode" class="multi-dialog" :id="devOne.box" :style="{position: fixed,height:'300px',width:'100px',bottom: devOne.left, right: devOne.top}">
  <div class="multi-dialog-title" :id="devOne.title">
    <span>{{ devOne.devCode }}</span>
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeDialog(devOne)">
      <i class="el-dialog__close el-icon el-icon-close"></i>
    </button>
  </div>
  <div class="multi-dialog-content">
     <bpg-kzmb></bpg-kzmb> 
    假设此处有内容
  </div>
</div>  -->


          <!-- <el-select
          v-show="tracetrain"
            @change="updatestate"
            v-model="train_lists"
            filterable
            placeholder="跟踪车"
            :style="{width:'120px',marginLeft:'5px',marginTop:'10px'}"
            style="z-index:9999;"
          >
            <el-option  :label="`请选择机车`" :value="1"></el-option>
            <el-option v-for="item in train_list" :key="item" :label="item" :value="item"></el-option>
          </el-select> -->
          <!-- <i
            class="iconfont icon-miaozhun"
            :style="{color:'#6FC2A1', fontSize:'20px',marginLeft:'15px',cursor: 'pointer'}"
          ></i> -->
        </div>
        <!-- <div class="trail-box" style="paddingLeft:10px">
          <el-select
          v-show="traceperson"
            @change="updatestate_person"
            v-model="person_lists"
            filterable
            placeholder="跟踪人"
            :style="{width:'120px',marginLeft:'-2px',marginTop:'10px'}"
            style="z-index:9999;"
          >
            <el-option :label="`请选择人员`" :value="1"></el-option>
            <el-option v-for="item in person_list" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <i
            class="iconfont icon-miaozhun"
            :style="{color:'#6FC2A1', fontSize:'20px',marginLeft:'15px',cursor: 'pointer'}"
          ></i>
        </div> -->
    </div>
    <!--围栏-->
    <el-dialog
      title="新增围栏"
      :visible.sync="geoDialog"
      :close-on-cliccloseOnClickModalk-modal="false"
    >
      <el-form :model="formData">
        <el-form-item label="围栏名称">
          <el-input v-model="formData.geoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="围栏类型">
          <el-select v-model="formData.geoType" placeholder="请选择围栏类型">
            <el-option label="封闭" value="1"></el-option>
            <el-option label="开放" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog('geoDialog')">取 消</el-button>
        <el-button type="primary" @click="confirmDialog('geoDialog')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- <lines
      v-show="linesDialog"
      @pointClick="pointClick"
      @pointcancel="pointcancel"
    ></lines> -->
    <template v-if="showMaker">
      <!-- <MakerDetail :prop1='3000'></MakerDetail> -->
    </template>
  </div>
</div>
</template>


<style lang="scss" scoped>
.title {
  color: #fff;
  font-size: 30px;
  padding: 60px;
}
</style>
<script>
import layer from "layui-layer";
// import layer from 'vue-layer'
import '@/utils/leaflet-rotate-master/dist/leaflet-rotate-src'
import lines from "@/components/Map/lines.vue";
import "leaflet.chinesetmsproviders/src/leaflet.ChineseTmsProviders.js";
import FenceGeo from "@/components/Map/FenceGeo.vue";
import makerdetail from "@/components/Map/makerdetail.vue";
import {
  listBgeoinfo,
  getBgeoinfo,
  addBgeoinfo,
  updateBgeoinfo,
  delBgeoinfo,
} from "@/api/invoice/geoinfo";
import {
  getTrainPageInfos,
  getDSS,
  TWS,
  getStatus,
  getStationInfos,
  postfencePoints,
  postfenceTrack,
  getFence,
  putFence,
  getAllFence,
  getStationGeo,
  deleteFence,
  deleteAllFence,
  getStationTask,
  getTaskFence,
  postPersonPosition,
  postController,
  getHistoryPersonPosition,
  startTraceReplay,
  getLineData,
  getuserInfo
} from "@/api/gis";

// window.jQuery = jQuery;
import {
  setMeasureToolTip,
  setDrawlatlngToolTip,
  setDrawGeofencingToolTip,
  pointPositionCalc,
  getCurentTime,
  getStringByLatlng,
  getLatlngByString,
  getPopupContent,
} from "@/utils/maptools.js";
import * as turf from "@turf/turf";
import nipplejs from 'nipplejs';
//import mappointjson from "@/assets/data/point.geojson";
// import maplinesjson from "@/assets/data/lines.geojson";
// import maplinesjson from "@/assets/data/lines_test.geojson";
// import stationjson from "@/assets/data/station.json";
// import stationjson_2 from "@/assets/data/station_2.json";
// import stationjson_3 from "@/assets/data/station_3.json";
// import stationjson_4 from "@/assets/data/station_4.json";
// import stationjson_5 from "@/assets/data/station_5.json";
// import stationjson_6 from "@/assets/data/station_6.json";
//import maplines12json from "@/assets/data/lines12.geojson";
import * as d3 from "d3"; 
import { data } from "jquery";
import { includes } from "lodash";
import { debug } from "util";
// import { start } from "repl";
const MASK_LAMPA_COLOR = 0x0000000f
const MASK_LAMPB_COLOR = 0x000000f0
const MASK_LAMPA_BLINK = 0x00000100
const MASK_LAMPB_BLINK = 0x00000200
const MASK_LAMP_CLOSE = 0x00000400
const MASK_SWITCH_SPLIT = 0x00000008
const MASK_SWITCH_NR = 0x00000010
const MASK_TRACK_OCCUPY = 0x00000001
const MASK_TRACK_LOCK = 0x00000002


const colorClassArray = ['None', 'Red', 'Green', 'Yellow', 'White', 'Blue', 'Gray','Blink']
  const switchClassArray = ['Normal', 'Reverse', 'SiKai', 'Unknown']
  const stateClassArray = ['Free', 'Occupy', 'Lock', 'None']
export default {
  name: "gisstationmap",
  components: { FenceGeo, lines },
  data() {
    return {
      requestState:false,
      loading:false,
      screenWidth: document.body.clientWidth, // 屏幕宽度
		screenHeight: document.body.clientHeight, // 屏幕高度
    test_length:0,
    devDialogs: [


    ],
          require:{
          //需要订阅的频道放在这里
          channels:[],
          //发出申请的组件名字放在这里
          component: 'gis'
        },
        trainNolist:{},
        checkversion:false,
        personNumberlist:{},
        train_options:[],
        person_options:[],
        //train_stationname_list:['高庄','大庄','军营沟','没良庙','彭庄','宝丰','苗圃','九矿','五矿','七矿','中心','申西','田庄','八矿','范庄','首山','十三矿','中鸿','电厂','十一矿','六矿','三矿','二矿','四矿','一矿','十矿','十二矿','天宏'],
        train_stationname_list:[],
      station_task:{},
      task_fence:{},
      max_lat:'',
      max_lon:'',
      min_lat:'',
      netState:'connect',
      min_lon:'',
      switch_status:1,
      data_pointsfence:1,
      delaytime:1,
      train_data:{},
      station_rightIsDown:{},
      the_state:1,
      the_state_2:0,
      person_data:{},
      stationLineData:{},
      storage_person_list:[],
      station_sub_list:[],
      station_view_list:[],
      station_follow_list:[],
      train_station_list:[],
      person_station_list:[],
      positioning_station_list:[],
      fencepoint:[[]],
      map: null,
      testlist: {
        n:1,
        fence:[

          
               [ 113.2569163888889, 33.75022777777778 ],
               [ 113.2951397222222, 33.75920305555556 ],
               [ 113.2913508333333, 33.75117888888889 ],
               [ 113.2978641666667, 33.75615416666666 ]
          
        ],
        	cross_points: [
			{
				distance_in_track: 0,
				distance_to_track: 0,
				station_no: 11,
				switch_part: 0,
				track_length: 80973,
				track_no: 24
			},
			{
				distance_in_track: 80973,
				distance_to_track: 0,
				station_no: 11,
				switch_part: 0,
				track_length: 80973,
				track_no: 24
			}
		]

      },

      formData: {
        geoName: "",
        geoType: "",
        geofencingRegion: "",
        regionType: "",
        radius: "",
        status: "1",
      },
              train_data_3:{
          deviceId:1234,
          deviceType:1,
          handle:1,
          mode:1,
          dir:2,
          upDownDir:1,
          stationNo:12,
          coverRoute:[
            {
            stationNo:11,
            dType:'switch',
            dname:'20',
            part:'normal'
          },
          {
            stationNo:12,
            dType:'track',
            dname:'6G'
          }],
          end1:{
            index:0,
            offset:10
          },
          end2:{
            index:1,
            offset:30
          },
          trainHead:'end1'
        },
        person_data_1:{
          deviceId:1234,
  	      deviceType:1,
          mode:1,         
          lon:33.74813055555556,
          lat:113.3319019444445,
          satellite:16,
          accuracyType:1,
          accur_dis:140,
          accur_hdop:1.1,
          speed:1000   
        },
        person_data_2:{
          deviceId:1234,
  	      deviceType:1,
          mode:1,         
          lon:33.74813055555556,
          lat:113.33219444445,
          satellite:16,
          accuracyType:1,
          accur_dis:140,
          accur_hdop:1.1,
          speed:1000   
        },
        train_data_2:{
          deviceId:12345,
          deviceType:1,
          handle:1,
          mode:1,
          dir:2,
          upDownDir:2,
          stationNo:11,
          coverRoute:[{
            stationNo:11,
            dType:'track',
            dname:'1G'
          },{
            stationNo:12,
            dType:'switch',
            dname:'1',
            part:'previous'
          }],
          end1:{
            index:0,
            offset:100000
          },
          end2:{
            index:1,
            offset:30
          },
          trainHead:'end1'
        },
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        train_data_5:{
          deviceId:12345,
          deviceType:1,
          handle:1,
          mode:1,
          dir:2,
          upDownDir:2,
          stationNo:11,
          coverRoute:[{
            stationNo:11,
            dType:'switch',
            dname:'7',
            part:'previous'
          },{
            stationNo:12,
            dType:'switch',
            dname:'1',
            part:'previous'
          }],
          end1:{
            index:0,
            offset:0
          },
          end2:{
            index:1,
            offset:30
          },
          trainHead:'end1'
        },
              person_lists:[1,-1],
              warning_lists:1,
              speed_state:1,
              warning_list:[],
              fen_lists:1,
              fen_list:['开放','封闭'],
              storage_lists:1,
              forward_lists:1,
              replayspeed_lists:1,
              speed_lists:1,
              select_deviceid:60999,
              select_deviceid_2:60999,
              storage_list:['存储','不存储'],
              forward_list:['转发','不转发'],
              replayspeed_list:['0.5X','0.75X','1X','1.25X','1.5X','2X'],
              speed_list:['慢','正常','快'],
              fence_showns:[],
              train_lists:[1,-1],
              train_list:[],
              station_list:[],
              lines_list:[],          
              person_list:[],                          
              new_test_data:{
          stationNo:12,
          devices:[{
            dtype:'signal',
            dname:'S7',
            dstate:34
          },
          {
            dtype:'track',
            dname:'2/20G',
            dstate:2
          },
          {
            dtype:'switch',
            dname:'2',
            dstate:3
          },
          // {
          //   dtype:'track',
          //   dname:'2/20G',
          //   dstate:0
          // },
          // {
          //   dtype:'switch',
          //   dname:'2',
          //   dstate:0
          // }
          ]
        },
      test_data:{
          stationNo:12,
          tracks:[{
            dname:'8G',
            dstate:1
          },{
            dname:'2G',
            dstate:0
          }],
          signals:[{
            dname:'X1',
            dstate:0
          },{
            dname:'S7',
            dstate:34
          }],
          switchs:[{
            dname:'1',
            dstate:1
          },{
            dname:'2',
            dstate:1
          }]
        },
      option: {
        minZoom: 13,
        maxZoom: 21,   
        center: [],
        crs: L.CRS.EPSG3857,
        zoom: 17,
        autoClose: false,
        coordinates:[],
        closeOnClick: false ,
        zoomControl: false, // 禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        dragging: true, // 禁止鼠标拖动滚动
        boxZoom: true, // 决定地图是否可被缩放到鼠标拖拽出的矩形的视图，鼠标拖拽时需要同时按住shift键.
        scrollWheelZoom: true, // 禁止鼠标滚动缩放
        //preferCanvas: true, // 使用canvas模式渲染矢量图形
        rotate: true,
				touchRotate: true,
				rotateControl: {
					closeOnZeroBearing: false
				},
				bearing: 0,
      },
      overLayer: {
        polylines: [],
        polygons: [],
        measurements: [],
        fonts: [],
      },
      tempGp: {
        lineNode: [],
        lineNodeLen: 0,
        tempLine: null,
        polygonNode: [],
        polygonNodeLen: 0,
        tempNode: [],
        tempPolygon: null,
        fontsNode: [],
      },
      linesdata: null,
      fencesdata: null,
      pointdata: null,
      linesdata12: null,
      // 绘制工具类型：测量、围栏等等
      drawArr: [],
      drawTools: {
        measureDisTool: null, //测距工具
        measureAreaTool: null, //测面工具
        polyGeofencing: null, //多边形围栏
        rectGeofencing: null, //矩形围栏
        circleGeofencing: null, //圆形围栏
        markerGeofencing: null, //点
        geofencingEdit: null, //编辑围栏
        geofencingDel: null, //删除围栏
        geofencingOptions: {}, //关闭围栏选项
        editedGeoLayer: [], //编辑过的地理围栏图层数组
        drawToolType: "", //绘制类型
      },
      layerGroup: {
        linesLayerGroup: null, // 线路图层组
        pointsLayerGroup: null, // 站点图层组
        pointsLayerGroup_2: null, // 站点图层组 
        pointsLayerGroup_3: null, // 站点图层组        
        fontsLayerGroup: null, // 文字描述图层组
        signalLayerGroup: null, // 信号灯图层组
        linestextLayerGroup: null, // 线路标示图层组
        insulatedLayerGroup: null, // 绝缘线图层组
        locomotiveLayerGroup: null, // 机车图层组
        geofencingLayerGroup: null, // 围栏图层组
        persionLayerGroup: null, // 人员图层组
        otherLayerGroup: null, // 其他图层组
        measureLayersGroup: null, // 绘制图层组
      },
      geoDialog: false, //围栏窗口
      warningDialog: false, //报警窗口
      tracetrain: true, //列车跟踪功能
      traceperson: true,   //人员跟踪功能
      linesDialog: false, //线路窗口
      locomotiveDialog: false, //机车窗口
      persionDialog: false, //人员窗口
      form: {
        name: "",
        geoType: "",
      },
      showMaker: false,
    };
  },
  destroyed() {
    for(var i=0;i<this.require.channels.length;i++)
      this.sockets.unsubscribe(this.require.channels[i])
    window.removeEventListener("resize", this.changeDivHeight, false);
  },
  created() {
        window.addToCart=this.addToCart
    window.deleteCart=this.deleteCart
    window.clickit=this.clickit
    window.updateview=this.updateview
    //this.socketApi.getSock(this.getConfigResult);
  },
  computed: {
    //$store.getters.serverStatus

  },
  mounted() {
    
    getLineData().then(res=>{
      if(res.code==0)
      for(var key in res.data)
      {
        this.station_rightIsDown[key]=res.data[key].baseInfo.rightIsDown
        this.stationLineData[key]={stationNo:'',signals:{},switchs:{},tracks:{}}
        this.stationLineData[key].stationNo=key
        for(var key1 in res.data[key].signals)
        this.stationLineData[key].signals[res.data[key].signals[key1].name]=0
        for(var key2 in res.data[key].switchs)
        this.stationLineData[key].switchs[res.data[key].switchs[key2].name]=-1
        for(var key3 in res.data[key].tracks)
        this.stationLineData[key].tracks[res.data[key].tracks[key3].name]=-1
      }
      else this.requestState=true
    }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
    this.$socket.on('connect', () => {
      this.$store.dispatch('app/setServerStatus', 1)
    })
    this.$socket.on('disconnect', () => {
      this.$store.dispatch('app/setServerStatus', 2)
    })
    this.$store.subscribe(()=>{
      if(this.$store.getters.serverStatus!=1&&this.netState=='connect')
      {
        this.netState='reconnect'
        this.loading=true
        var interval=setInterval(()=>{
          if(this.$store.getters.serverStatus==1)
          {
            this.netState='connect'
            this.loading=false
            clearInterval(interval); 
            this.fence_showns=[]
            this.task_fence={}
            this.station_task={}
            let layers=this.layerGroup.geofencingLayerGroup.getLayers();
            let that=this
            layers.map(function (layer){
              that.layerGroup.geofencingLayerGroup.removeLayer(layer)
            })
            getStationTask().then((response)=>{
              if(response.code==0)
                this.rendeStationTask(response.data.item)
              else this.requestState=true
            }).catch(error => {
                  if(error.message.includes('timeout')){
                      this.requestState=true
                  }  
                  })
                  {
              getStatus().then((response)=>{
          for(const key in response.data)
          {
            {
              if(response.data[key]==0)
              {
                getDSS(this.sub_station[i]).then((response)=>{
                  this.renderOneStationDevices(response.data,response.data)
                }).catch(error => {
                      if(error.message.includes('timeout')){
                          this.requestState=true
                      }  
                      })
              }
              else
              {
                var data={}
                data.stationNo=key
                this.renderOneStationDevices(this.stationLineData[key],data)
              }
            }
          }
        }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
            }

        {
        let that=this
        
        TWS(1).then((response)=>{     //11.4添加定时检查车站列车情况
    //  debugger
          let that=this
          let layers=this.layerGroup.locomotiveLayerGroup.getLayers();
      layers.map(function (layer){
        var exist_state=0
        for(const key in response.data.deviceInfos)
        {
          if(key==layer.id)
          exist_state=1
        }
        if(exist_state==0)
        {
              var train_name='TrainRTInfo:'+layer.id+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+layer.id+'_1'
              that.sockets.unsubscribe(train_name)
              that.sockets.unsubscribe(trainwarn_name)
              that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
              that.train_list.splice(that.train_list.indexOf(layer.id),1)
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==train_name)  
        that.require.channels.splice(that.require.channels.indexOf(train_name),1) 
        if(that.require.channels[i]==trainwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(trainwarn_name),1) 

        }
        }
            })
      var score
      var length=0
      //debugger
      that.train_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.train_station_list[i][0])
          {
            that.train_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.train_station_list[i]=[]
                    that.train_station_list[i].push(response.data.deviceInfos[key])
                    that.train_station_list[i].push(key)
                    length=length+1           
        }
        var state_1=0
        for(var i=0;i<this.station_sub_list;i++)
        {
          if(response.data.deviceInfos[key]==this.station_sub_list[i])
          state_1=1
        }
        if(state_1==1)
        {
          if(this.train_list.includes(key))
          {}
          else
          {
            {
                  var train_name='TrainRTInfo:'+key+'_1'
                  var trainwarn_name='TrainPreWarnInfo:'+key+'_1'
                  this.require.channels.push(train_name)    
                  this.require.channels.push(trainwarn_name)    
                  this.$bus.$emit('Subscribe', this.require)
                  this.require.channels=[...new Set(this.require.channels)]    
                  this.sockets.subscribe(train_name, res => {
                  // console.log(res.data.devices)
                  
                  this.renderTrainDevice(res.data)
                  })
                  this.sockets.subscribe(trainwarn_name, res => {
                  // console.log(res.data.devices)
                  this.updateTrainPopup(res.data)
                  })
            }
          }
        }
        if(state_1==0)
        {
          if(this.train_list.includes(key))
          {
            {
              // that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
              var train_name='TrainRTInfo:'+layer.id+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+layer.id+'_1'
              // that.$bus.$emit('Unsubscribe', that.require) 
              this.sockets.unsubscribe(train_name)
              this.sockets.unsubscribe(trainwarn_name)
              for(var i=0;i<this.require.channels.length;i++)
        {
        if(this.require.channels[i]==train_name)  
        this.require.channels.splice(this.require.channels.indexOf(train_name),1) 
        if(this.require.channels[i]==trainwarn_name)
        this.require.channels.splice(this.require.channels.indexOf(trainwarn_name),1) 
        }
            }
            let layers=this.layerGroup.locomotiveLayerGroup.getLayers();
            layers.map(function (layer){
              if(layer.id==key)
              {
                that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
                that.train_list.splice(that.train_list.indexOf(key),1)
              }

            })
          }
        }
      }  
      this.train_station_list.length=length 
      this.addtraininfo()
        }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })

        TWS(2).then((response)=>{    //11.4添加定时检查车站手持终端情况
      var score
      var length=0
      var state_1
      //debugger
      let layers=this.layerGroup.persionLayerGroup.getLayers();
      let that=this
      layers.map(function (layer){
        
        var exist_state=0
        for(const key in response.data.deviceInfos)
        {
          if(key==layer.id)
          exist_state=1
        }
        if(exist_state==0)
        {
              var person_name='GnssInfo:'+layer.id+"_2"
              var personwarn_name='PersonPreWarnInfo_HT:'+layer.id+'_2'
              var personrt_name='PersonRTInfo_HT:'+layer.id+'_2'  
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(person_name)
              that.sockets.unsubscribe(personwarn_name)
              that.sockets.unsubscribe(personrt_name)
              that.layerGroup.persionLayerGroup.removeLayer(layer)
              that.person_list.splice(that.person_list.indexOf(layer.id),1)
        }
            })
      that.person_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.person_station_list[i][0])
          {
        
            that.person_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.person_station_list[i]=[]
                    that.person_station_list[i].push(response.data.deviceInfos[key])
                    that.person_station_list[i].push(key)
                     length=length+1           
        }
        for(var i=0;i<this.station_sub_list;i++)
        {
          if(response.data.deviceInfos[key]==this.station_sub_list[i])
          state_1=1
        }
        if(state_1==1)
        {
          if(this.person_list.includes(key))
          {}
          else
          {
            {
              var person_name='GnssInfo:'+key+'_2'
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_2'
              var personrt_name='PersonRTInfo_HT:'+key+'_2'              
              this.require.channels.push(person_name)    
              this.require.channels.push(personwarn_name)
              this.require.channels.push(personrt_name)
              this.$bus.$emit('Subscribe', this.require)    
              this.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              this.renderPeopleDevice(res.data)
              })
              this.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              this.updatePersonPopup(res.data)
              })
              this.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
              this.updatePersonRT(res.data)
              })
              }
          }
        }
        if(state_1==0)
        {
          if(this.person_list.includes(key))
          {
            {
              var person_name='GnssInfo:'+key+"_2"
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_2'
              var personrt_name='PersonRTInfo_HT:'+key+'_2'  
              // that.$bus.$emit('Unsubscribe', that.require) 
              this.sockets.unsubscribe(person_name)
              this.sockets.unsubscribe(personwarn_name)
              this.sockets.unsubscribe(personrt_name)
              for(var i=0;i<this.require.channels.length;i++)
        {
        if(this.require.channels[i]==person_name)  
        this.require.channels.splice(this.require.channels.indexOf(person_name),1) 
        if(this.require.channels[i]==personwarn_name)
        this.require.channels.splice(this.require.channels.indexOf(personwarn_name),1) 
        if(this.require.channels[i]==personrt_name)
        this.require.channels.splice(this.require.channels.indexOf(personrt_name),1) 
        }
            }
            let layers=this.layerGroup.persionLayerGroup.getLayers();
            layers.map(function (layer){
              if(layer.id==key)
              {
                that.layerGroup.persionLayerGroup.removeLayer(layer)
                that.person_list.splice(that.person_list.indexOf(key),1)
              }

            })
          }
        }
      }  
      this.person_station_list.length=length 
      this.addtraininfo()
        }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })


  





  
        }


          }

        },1000)


      }

    })



    let that=this

//     var joystick = nipplejs.create({
//     zone: document.getElementById('left'),
//     mode: 'static',//mode: 'semi','dynamic'
//     position: { left: '20%', top: '50%' },
//     color: 'green',
//     size: 200
// });
setTimeout(()  =>{
  
  for(var i=0;i<that.storage_person_list.length;i++)
  {
    let Layers = that.layerGroup.persionLayerGroup.getLayers();
    Layers.map(function (layer){
        
        if(layer.id==that.storage_person_list[i])
        {
          var the_lat=layer._latlng.lat
          var the_lng=layer._latlng.lng
          the_lng*=3600000
          the_lat*=3600000
          var _data={
          "device_id":layer.id,
          "device_type":2,
          "mode":1,
          "lon":the_lng,
          "lat":the_lat,
          "number":1,
          "location_mode":1,
          "location_number":5,
          "speed":100
          }
          postPersonPosition(_data).then((response)=>{       //10.25数据传递到nodejs
          

          })
        }
    })
  }
       
},200)
// joystick.on('start end', function (evt, data) {
  


//   console.log('start end')
// console.log(data);

// }).on('move', function (evt, data) {
//   //10.25控制人员移动
//   let Layers = that.layerGroup.persionLayerGroup.getLayers();
//   var state=0
//       Layers.map(function (layer){
        
//         if(layer.id==that.select_deviceid)
//         {
//           state=1
//           console.log('the marker is'+layer._latlng.lat)
//           console.log(layer._latlng.lat)      
//           var the_lat=data.vector.x/3000000*that.speed_state+layer._latlng.lat
//           var the_lng=data.vector.y/3000000*that.speed_state+layer._latlng.lng
//           layer.setLatLng([the_lat,the_lng]);
//           that.map.setView([the_lat,the_lng], 18);      
//           the_lng*=3600000
//           the_lat*=3600000
//           // var _data={
//           // "device_id":that.select_deviceid,
//           // "device_type":2,
//           // "mode":1,
//           // "lon":the_lng,
//           // "lat":the_lat,
//           // "number":1,
//           // "location_mode":1,
//           // "location_number":5,
//           // "speed":100
//           // }
//           // postPersonPosition(_data).then((response)=>{       //10.25数据传递到nodejs
          
//           //   console.log("postPersonPosition")
//           // })
//         }
//       })
//       if(state==0)
//       {
//         that.createPeoplePosition(that.select_deviceid,121509268.00440389,407858490.6109728)
//       }


//   console.log('move')
// console.log(data.vector.x);
// }).on('dir:up plain:up dir:left plain:left dir:down ' +
// 'plain:down dir:right plain:right',
// function (evt, data) {
//     console.log('打印姿态text')

// }
// ).on('pressure', function (evt, data) {

// });


    this.train_lists=[0,-1]
    this.the_state=0
    this.the_state_2=1
    this.train_lists[1]=this.$router.currentRoute.query.deviceId
    if(this.screenWidth<500)
    {
      this.traceperson=false
      this.tracetrain=false
    }
    window.getDataFromNative=this.getDataFromNative
    
 


    // TWS(2).then((response)=>{
    //   let that=this
    //   console.log(response.data)
    //   var score
    //   var length=0
    //   //debugger
    //   that.person_station_list=[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]]
    //   for(const key in response.data.deviceInfos)
    //   {
    //   score=1
    //   for(var i=0;i<length;i++)  
    //     {
    //       if(response.data.deviceInfos[key]==that.person_station_list[i][0])
    //       {
    //         that.person_station_list[i].push(key)
    //         length=length+1
    //         score=0
    //       };
    //     } 
    //     if(score==1)
    //     {
    //                 that.person_station_list[i].push(response.data.deviceInfos[key])
    //                 that.person_station_list[i].push(key)
    //                  length=length+1           
    //     }

    //   }  
    //   console.log(that.person_station_list)    
    //   that.person_station_list.length=length  
    // })


    getStationGeo().then((response)=>{
      let that=this
      if(response.code==0)
      {
        
      
    this.linesdata=response.data
    this.initEnclosure(); 
    // this.require.channels.push('TrainRTInfo:6008_1')   
    this.require.channels.push('TWS_Entitys:Train')   
    this.require.channels.push('UserLoginDeviceInfo')   
    this.require.channels.push('TWS_Entitys:PersonHT')
    this.require.channels.push('TWS_Entitys:PositioningHT') 
    this.require.channels.push('StationStatus:DSS') 
    this.require.channels.push('TaskChangeBriefInfo') 
        // this.require.channels.push('GnssInfo:60011_2')  
            this.$bus.$emit('Subscribe', this.require)
      //       this.sockets.subscribe('TrainRTInfo:6008_1', res => {
      //  // console.log(res.data.devices)
      //   this.renderTrainDevice(res.data)
      // })          
      this.sockets.subscribe('StationStatus:DSS',res => {
        for(var key in res.data)
        if(res.data[key]!=0)
        {
          
          var data={}
          data.stationNo=key
          this.renderOneStationDevices(this.stationLineData[key],data)
        }

      }) 
      this.sockets.subscribe('UserLoginDeviceInfo', res => {
          let that=this
          for(var key in res.data)
                
                {

                  if(res.data[key]==null)
                  {
                  for(var i in this.personNumberlist)
                  if(this.personNumberlist[i].LoginuserId==key)
                  {
                    this.personNumberlist[i].userAccount=""
                    this.personNumberlist[i].LoginuserId=""
                    if(this.personNumberlist[i].userName==null)
                    this.personNumberlist[i].userdeviceinfo=this.personNumberlist[i].userId
                    else this.personNumberlist[i].userdeviceinfo=this.personNumberlist[i].userName+'('+this.personNumberlist[i].userId+')'
                    if(this.personNumberlist[i].userAccount)
                    this.personNumberlist[i].userdeviceinfo=this.personNumberlist[i].userdeviceinfo+'/'+this.personNumberlist[i].userAccount
                  }
                  }
                  else
                  {
                    
                    for(var i in this.personNumberlist)
                    if(i==res.data[key].deviceId)
                    {
                      this.personNumberlist[i].LoginuserId=key
                      getuserInfo(key).then(response =>{
                        
                      if(response.code==0)
                      {
                      for(var i in this.personNumberlist)
                      if(this.personNumberlist[i].LoginuserId==key)
                      {
                      this.personNumberlist[i].userAccount=response.data.userName
                      if(this.personNumberlist[i].userName==null)
                      this.personNumberlist[i].userdeviceinfo=this.personNumberlist[i].userId
                      else this.personNumberlist[i].userdeviceinfo=this.personNumberlist[i].userName+'('+this.personNumberlist[i].userId+')'
                      if(this.personNumberlist[i].userAccount)
                      this.personNumberlist[i].userdeviceinfo=this.personNumberlist[i].userdeviceinfo+'/'+this.personNumberlist[i].userAccount
                      }
                    }
                    }).catch(error => {
                          if(error.message.includes('timeout')){
                              this.requestState=true
                          }  
                          })
                    }
                  }
                }
          
        })
    
      this.sockets.subscribe('TaskChangeBriefInfo', res => {
        let that=this
        this.taskchange(res)
  
      })
      this.sockets.subscribe('TWS_Entitys:Train', res => {

       // console.log(res.data.devices)
       let that=this
       var length=0 
       var score=1
       var state
       if(res.props.type=='sync'||res.props.type=='add')
        {this.createTrain(res)
          this.addtraininfo()
        }
              if(res.props.type=='sync')
      {
        for(var key in res.data.deviceInfos)
        if(res.data.deviceInfos[key]==0)
        {
          var train_name='TrainRTInfo:'+key+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+key+'_1'
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(train_name)
              that.sockets.unsubscribe(trainwarn_name)
            
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==train_name)  
        that.require.channels.splice(that.require.channels.indexOf(train_name),1) 
        if(that.require.channels[i]==trainwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(trainwarn_name),1) 

        }
        }
      }
      if(res.props.type=='change')
      {
        for(var key in res.data.deviceInfos)
      {
      for(var i in that.train_station_list)  
        {
          var length=that.train_station_list[i].length
          for(var j=1;j<length;j++)  
          if(key==that.train_station_list[i][j])
          {
            that.train_station_list[i].splice(that.train_station_list[i].indexOf(key),1)
          }
        }
        var state=0
        for(var i in that.train_station_list)
        if(that.train_station_list[i][0]==res.data.deviceInfos[key])
        state=1
        if(state==0)
        {
          that.train_station_list[res.data.deviceInfos[key]]=[]
          that.train_station_list[res.data.deviceInfos[key]].push((res.data.deviceInfos[key]))
     
        }

      }
      
        for(var key in res.data.deviceInfos)
        if(res.data.deviceInfos[key]!=0)
        {
          this.createTrain(res)
          if(this.train_lists[1]==key)
          {
           
            this.station_follow_list=[]
            this.station_follow_list.push(res.data.deviceInfos[key])
          }

        }

        else this.deleteTrain(res)

      }  
      if(res.props.type=='delete')
      {
      if(this.train_lists[1]==key)
          {
            this.train_lists=[0,-1]
            this.station_follow_list=[]
          }
        this.deleteTrain(res)
        this.addtraininfo()
      }  
      for(var key in this.train_options)
      {
        this.train_options[key].children=[]
        this.train_options[key].label=this.train_stationname_list[key]+' ( 0 )'
      }
      for(var j in this.train_station_list)
      {
        for(var k=1;k<this.train_station_list[j].length;k++)
        {
     
          if(this.train_station_list[j][0]>0)
          {
          
         
          this.train_options[this.train_station_list[j][0]].children[k-1]={
            'value':1,
            'label':1,
          }
          this.train_options.push('{}')
          this.train_options.pop()
          this.train_options[this.train_station_list[j][0]].children[k-1].value=this.train_station_list[j][k]
          this.train_options[this.train_station_list[j][0]].children[k-1].label=this.trainNolist[this.train_station_list[j][k]]
          
          }
        }

        if(this.train_station_list[j][0]>0)
        this.train_options[this.train_station_list[j][0]].label=this.train_stationname_list[this.train_station_list[j][0]]+' ( '+(this.train_options[this.train_station_list[j][0]].children.length)+' )'

      }
      

      }) 
      this.sockets.subscribe('TWS_Entitys:PersonHT', res => {
        var exist_state=0                              //预防新加人
        for(var key in res.data.deviceInfos)
        {
          exist_state=0
        for(var key_ in this.personNumberlist)
        {
          if(key_==key)
          exist_state=1
        }
        if(exist_state==0)
        {
          this.personNumberlist[key]={deviceName:'',userName:'',userAccount:'',LoginuserId:''}
          this.personNumberlist[key].deviceName=key
        }

        }
       // console.log(res.data.devices)
       // console.log(res.data.devices)
       let that=this
       var length=0 
       var score=1
       var state
       if(res.props.type=='sync'||res.props.type=='add')
        {this.createPerson(res)
          this.addtraininfo()
        }
      if(res.props.type=='change')
      {
        for(var key in res.data.deviceInfos)
      {
      for(var i in that.person_station_list)  
        {
          var length=that.person_station_list[i].length
          for(var j=1;j<length;j++)  
          if(key==that.person_station_list[i][j])
          {
            that.person_station_list[i].splice(that.person_station_list[i].indexOf(key),1)
          }
        }
        var state=0
        for(var i in that.person_station_list)
        if(that.person_station_list[i][0]==res.data.deviceInfos[key])
        state=1
        if(state==0)
        {
          that.person_station_list[res.data.deviceInfos[key]]=[]
          that.person_station_list[res.data.deviceInfos[key]].push((res.data.deviceInfos[key]))
          that.person_station_list[res.data.deviceInfos[key]].push(key)
        }

      }
      
        for(var key in res.data.deviceInfos)
        if(res.data.deviceInfos[key]!=0)
        {
          this.createPerson(res)
          if(this.person_lists[1]==key)
          {
            this.person_lists[0]=String(res.data.deviceInfos[key])
            this.person_lists[1]=key
          }

        }

        else this.deletePerson(res)
      }  
      if(res.props.type=='delete')
      {
        for(var key in res.data.deviceInfos)
        if(res.data.deviceInfos[key]!=0)
        if(this.person_lists[1]==key)
          {
            this.person_lists=[0,-1]
          }
        this.deletePerson(res)
        this.addtraininfo()
      } 
      
      for(var key in this.person_options)
      {
        this.person_options[key].children=[]
        this.person_options[key].label=this.train_stationname_list[key]+' ( 0 )'
      }
      
       for(var j in this.person_station_list)
       if(this.person_station_list[j][0]>0)
      {
        this.person_options[this.person_station_list[j][0]].children=[]
        for(var k=1;k<this.person_station_list[j].length;k++)
        {
   
          if(this.person_station_list[j][0]>0)
          {
         
          this.person_options[this.person_station_list[j][0]].children[k-1]={
            'value':1,
            'label':1,
          }
          this.person_options.push('{}')
          this.person_options.pop()
          this.person_options[this.person_station_list[j][0]].children[k-1].value=this.person_station_list[j][k]
          this.person_options[this.person_station_list[j][0]].children[k-1].label=this.personNumberlist[this.person_station_list[j][k]].deviceName
          
          }
        }
        this.person_options[this.person_station_list[j][0]].label=that.train_stationname_list[this.person_station_list[j][0]]+' ( '+(that.person_options[this.person_station_list[j][0]].children.length)+' )'
     

      }
      }) 
      this.sockets.subscribe('TWS_Entitys:PositioningHT', res => {
       // console.log(res.data.devices)
       // console.log(res.data.devices)
       let that=this
       var length=0 
       var score=1
       var state
       if(res.props.type=='sync'||res.props.type=='add')
        {this.createPositioning(res)
          this.addtraininfo()
        }
      if(res.props.type=='change')
      {
        this.deletePositioning(res)
        this.createPositioning(res)
        this.addtraininfo()
      }  
      if(res.type=='delete')
      {
        this.deletePositioning(res)
        this.addtraininfo()
      } 


      }) 
      //             this.sockets.subscribe('GnssInfo:60011_2', res => {
      //  // console.log(res.data.devices)
      //   this.renderPeopleDevice(res.data)
      // })             
  




    //     getAllFence().then((response)=>{
    //   this.fencesdata=response.data
    //   this.initFence(this.fencesdata,1);
    // })

        // this.updateLines();

    getTrainPageInfos().then((response)=>{
      if (response.code === 0) {
          this.trainNolist=new Map()
          for(var i=0;i<response.data.length;i++)
          {
            if(response.data[i].deviceType==1)
          {
            if(response.data[i].trainNo)
            this.trainNolist[response.data[i].deviceId]=response.data[i].trainNo
            else this.trainNolist[response.data[i].deviceId]=response.data[i].deviceId
          }
            else if(response.data[i].deviceType==2)
            {
              this.personNumberlist[response.data[i].deviceId]={deviceName:'',userName:'',userAccount:'',LoginuserId:''}
              if(response.data[i].deviceName)
              this.personNumberlist[response.data[i].deviceId].deviceName=response.data[i].deviceName
              else this.personNumberlist[response.data[i].deviceId].deviceName=response.data[i].deviceId
              if(response.data[i].deviceAccount)
              this.personNumberlist[response.data[i].deviceId].userAccount=response.data[i].deviceAccount
              this.personNumberlist[response.data[i].deviceId].LoginuserId=response.data[i].userId
            }
          }
        }
        else this.requestState=true

    getStationInfos().then((response)=>{
      if(response.code==0)
      {
        
      for(var key in response.data)
      if(response.data[key].center)
      {
        this.option.center[1]=response.data[key].center[0]
        this.option.center[0]=response.data[key].center[1]
        for(var i=0;i<response.data[key].range.features[0].geometry.coordinates[0].length;i++)
        {
          if(response.data[key].range.features[0].geometry.coordinates[0][i][0]>this.max_lon)
          this.max_lon=response.data[key].range.features[0].geometry.coordinates[0][i][0]
          
          if(response.data[key].range.features[0].geometry.coordinates[0][i][0]<this.min_lon)
          this.min_lon=response.data[key].range.features[0].geometry.coordinates[0][i][0]

          if(response.data[key].range.features[0].geometry.coordinates[0][i][1]>this.max_lat)
          this.max_lat=response.data[key].range.features[0].geometry.coordinates[0][i][1]

          if(response.data[key].range.features[0].geometry.coordinates[0][i][1]<this.min_lat)
          this.min_lat=response.data[key].range.features[0].geometry.coordinates[0][i][1]

        }
        this.option.coordinates=[[],[]]
        this.option.coordinates[0][0]=this.max_lat+0.03
        this.option.coordinates[0][1]=this.max_lon+0.03
        this.option.coordinates[1][0]=this.min_lat-0.03
        this.option.coordinates[1][1]=this.min_lon-0.03
      }
      
      this.train_stationname_list=new Map()
      for(var key in response.data)
      {
        this.train_stationname_list[key]=response.data[key].name
      }

      var i=0
      for(var key in this.train_stationname_list)
    {
      

      this.person_options.push('{}')
      this.train_options.push('{}')
      this.train_options.pop()
      this.person_options.pop()
      this.train_options[key]=
      {
        'value':1,
        'label':1,
        'children':[],
      }
      this.person_options[key]=
      {
        'value':1,
        'label':1,
        'children': [],
      }
      this.train_options[key].value=key
      this.train_options[key].label=this.train_stationname_list[key]+' ( 0 )'
      this.train_options[key].children=[]
      this.person_options[key].value=key
      this.person_options[key].label=this.train_stationname_list[key]+' ( 0 )'
      this.person_options[key].children=[]
  
    }

      this.stationjson=response.data
      this.initMap();

      this.initLines();
      this.initLight();
      this.initLocomotive();
      this.initPoints();   
      this.addtraininfo()
      getStationTask().then((response)=>{
        if(response.code==0)
          this.rendeStationTask(response.data.item)
        else this.requestState=true
 
      }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
      TWS(1).then((response)=>{
        if(response.code==0)
        {
          
    //  debugger
      let that=this

      var score
      var length=0
      
      that.train_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.train_station_list[i][0])
          {
  
            that.train_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.train_station_list[i]=[]         
                    that.train_station_list[i].push(response.data.deviceInfos[key])
                    that.train_station_list[i].push(key)
                     length=length+1           
        }

      }  

      that.train_station_list.length=length 
      for(var j=0;j<length;j++)
      {

        for(var key in this.train_options)
      {
        that.train_options[key].children=[]
      }
          for(var l in that.train_options)
          {
            if(that.train_options[l].value==that.train_station_list[j][0])
            {
            
            for(var i=1;i<that.train_station_list[j].length;i++)
            {
              that.train_options.push('{}')
              that.train_options.pop()
              that.train_options[l].children[i-1]={
                'value':1,
                'label':1,
              }
              that.train_options[l].children[i-1].value=that.train_station_list[j][i]
              that.train_options[l].children[i-1].label=that.trainNolist[that.train_station_list[j][i]]
            }
            that.train_options[l].label=that.train_stationname_list[l]+' ( '+(that.train_options[l].children.length)+' )'
            }
          }

      }

      this.the_state=0
      if(this.train_lists[1]>0)
      {

        this.selectChanged(this.train_lists[1])
      }

    
        }
        else this.requestState=true
      }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })

    TWS(2).then((response)=>{
      if(response.code==0)
      {
        
      
      let that=this

      var score
      var length=0
      //debugger
      that.person_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.person_station_list[i][0])
          {
      
            that.person_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.person_station_list[i]=[]
                    that.person_station_list[i].push(response.data.deviceInfos[key])
                    that.person_station_list[i].push(key)
                     length=length+1           
        }

      }
      for(var key in this.person_options)
      {
        this.person_options[key].children=[]
      }  

      that.person_station_list.length=length 
      for(var j=0;j<length;j++)
      {
        for(var l in that.person_options)
          {
            if(that.person_options[l].value==that.person_station_list[j][0])
            {
              that.person_options[l].children=[]
            for(var i=1;i<that.person_station_list[j].length;i++)
            {
              that.person_options.push('{}')
              that.person_options.pop()
              that.person_options[l].children[i-1]={
                'value':1,
                'label':1,
              }
              that.person_options[l].children[i-1].value=that.person_station_list[j][i]
              that.person_options[l].children[i-1].label=that.personNumberlist[that.person_station_list[j][i]].deviceName
            }
            that.person_options[l].label=that.train_stationname_list[l]+' ( '+(that.person_options[l].children.length)+' )'

            }
          }
      }
      this.the_state=0
      if(this.person_lists[1]>0)
      this.selectChanged(this.person_lists[1])
    
      }
      else this.requestState=true
    }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })

    TWS(3).then((response)=>{
      if(response.code==0)
      {
        
    //  debugger
      let that=this

      var score
      var length=0
      //debugger
      that.positioning_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.positioning_station_list[i][0])
          {
  
            that.positioning_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.positioning_station_list[i]=[]
                    that.positioning_station_list[i].push(response.data.deviceInfos[key])
                    that.positioning_station_list[i].push(key)
                     length=length+1           
        }

      }  
    
      that.positioning_station_list.length=length 
      for(var j=0;j<length;j++)
      {
        for(var k=1;k<that.positioning_station_list[j].length;k++)
        {
          for(var l=0;l<that.positioning_options.length;l++)
          {
            if(that.positioning_options[l].value==that.positioning_station_list[j][0])
            {
              that.positioning_options[l].children[k-1]={
            'value':1,
            'label':1,

            }
            that.positioning_options.push('{}')
            that.positioning_options.pop()
            that.positioning_options[l].children[k-1].value=that.positioning_station_list[j][k]
            that.positioning_options[l].children[k-1].label=that.positioning_station_list[j][k]
            }
          }

       

        }

      }
    
      }
      else this.requestState=true
    }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
    
      }
      else this.requestState=true
    }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
 
        }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })


      
      }
      else this.requestState=true
    }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })

    setTimeout(this.delaydelete,3000)  
    setTimeout(this.checkfencestate,60000)      
    // window.addToCart=this.addToCart
    // window.deleteCart=this.deleteCart
    window.addEventListener("resize", that.changeDivHeight);
    // that.pointdata = mappointjson;
    // that.linesdata = maplinesjson;
    // that.linesdata12 = maplinesjson;
    // {
    //   var taskid=52
    //   var stationid=12
    //   var state=5
    //   this.task_fence[taskid]={}
    //   this.task_fence[taskid].fenceid=[6]




    
    // this.initMap();

    // this.initLines();
    //     // this.updateLines();
    // this.initLight();
    // this.initLocomotive();
    // this.initPoints(stationjson);
    // this.initPoints(stationjson_2);
    // this.initPoints(stationjson_3);
    // this.initPoints(stationjson_4);
    // this.initPoints(stationjson_5);
    // this.initPoints(stationjson_6);            
    // this.initEnclosure();

      // this.require.channels.push('StationDSS_All:11')
      //  this.require.channels.push('StationDSS:11')
      //  this.require.channels.push('TrainRTInfo:6008_1')     
      //   this.$bus.$emit('Subscribe', this.require)
      // // 接收数据
      // this.sockets.subscribe('StationDSS_All:11', res => {
      //   console.log(res.data.devices)
      //   this.renderOneStationDevices(res.data)
      // })
      // this.sockets.subscribe('StationDSS:11', res => {
      //   console.log(res.data.devices)
      //   this.renderOneStationDevices(res.data)
      // })
      // this.sockets.subscribe('TrainRTInfo:6008_1', res => {
      //  // console.log(res.data.devices)
      //   this.renderTrainDevice(res.data)
      // })
      // this.sockets.subscribe('GnssInfo:1234_1', res => {
      //  // console.log(res.data.devices)
      //   this.renderPeopleDevice(res.data)
      // })
    //线路组
    //站点组
    //信号灯组
    //围栏组
    //机车组
    //人员组

    //采用图层组，存储不同类型的数据

    //初始化加载数据，中心点位置根据人员角色，可以看站，可以看全线

    //加载线路，根据规则变换线路颜色
    //加载站点，可单击看详细信息
    //加载信号灯，根据规则变换信号灯颜色

    //加载围栏，单击显示围栏信息
    //加载机车、单击显示机车信息
    //加载人员、单击显示人员信息

    //显示浮动站名信息窗口，可拖动，不影响下层地图，可单击切换看站点区域

    //地图范围变化处理元素、图形元素大小粗细、字体大小等应根据不同缩放等级变化，保证清晰可见

    //町车、盯人功能，地图跟着元素自动移动（电子地图随目标移动而平移）

    //取消町车、盯人功能，地图恢复

    //围栏功能、绘制多边形、圆形、可以删除和修改
    //一键回到当前位置或者最初位置
    //选点经纬度功能
    //选定多边形、圆形，显示经纬度功能

    //websocket ，监听机车、人员、围栏变化
    //可以实时增加机车、删除机车、机车位置矫正
    //可以增加人员、删除人员、控制人员颜色（出线红色显示，回去后恢复原颜色）
  },
    destroyed() {

          for(var i=0;i<this.require.channels.length;i++)
      this.sockets.unsubscribe(this.require.channels[i])
      this.delaytime=0
      // //向全局申请取消订阅频道（订阅请求，订阅信息）
      // this.$bus.$emit('Unsubscribe', require)

      // // 关闭接收数据
      // this.sockets.unsubscribe('StationDSS_All:11')
      // this.sockets.unsubscribe('StationDSS:11')
      // this.sockets.unsubscribe('TrainRTInfo:6008_1')
      // this.sockets.unsubscribe('GnssInfo:1234_1')      

    },
  methods: {

    updatedialog()
    {
      this.test_length++
      

      var the_length=document.body.clientWidth/300

      var c={
        devCode:1001,
        box:1002,
        left:'120px',
        leftnum:120,
        bottom:'30px',
        title:10,
        devCode:this.test_length
      }
      if(this.devDialogs.length<the_length)

      {
         
        for(const c in this.devDialogs)
      {
        this.devDialogs[c].leftnum+=200
        this.devDialogs[c].left=this.devDialogs[c].leftnum+'px'
      }
      this.devDialogs.push(c)
      }
      else
      {
        this.warningDialog=true
        for(const c in this.devDialogs)
      {
        this.devDialogs[c].leftnum+=200
        this.devDialogs[c].left=this.devDialogs[c].leftnum+'px'
      }
        this.warning_list.push(this.devDialogs[0])
        this.devDialogs.splice(0,1)
       this.devDialogs.push(c)
       }
    },
    updatePersonPosition(){
      setTimeout(()  =>{
        let that=this
        getHistoryPersonPosition(1).then((response)=>{
          var state=1
        let Layers = that.layerGroup.persionLayerGroup.getLayers();
        Layers.map(function (layer){
          
        if(layer.id==parseInt(response.data.device_id))
        {
          state=0
          layer.setLatLng([parseFloat(response.data.lat)/3600000, parseFloat(response.data.lon)/3600000]);
        }
        })
        if(state==1){
          that.createPeoplePosition(parseInt(response.data.device_id),parseFloat(response.data.lat), parseFloat(response.data.lon))
        }


        let center = L.latLng(parseFloat(response.data.lat)/3600000, parseFloat(response.data.lon)/3600000);
        if (that.map.getZoom() < 17) 
        that.map.setView(center,20);
        else  that.map.setView(center);
        })
      },200)

    },
    reFreshGis()
    {
      if(window.location.pathname!='close')
      this.$router.go(0)
      else this.$router.go('gis/index')
    },
    addtraininfo()
    {
      let that=this
      
      let Layers = this.layerGroup.pointsLayerGroup_3.getLayers();

      Layers.map(function (layer){
      that.map.removeLayer(layer)})
      // debugger

      for(const key in that.stationjson){
          //debugger
        const a=that.stationjson[key]
        const stationjson=a
        if(stationjson['center']!=undefined){
          var state=1

          var train_length=0
          var person_length=0
          var positioning_length=0
          for(const i in that.train_station_list){
          if(that.train_station_list[i][0]==stationjson['id'])
          {
            train_length=(that.train_station_list[i].length-1)
            state=0
          }
          }
          for(const i in that.person_station_list){
          if(that.person_station_list[i][0]==stationjson['id'])
          {
            person_length=(that.person_station_list[i].length-1)
            state=0
          }
          }
          for(const i in that.positioning_station_list){
          if(that.positioning_station_list[i][0]==stationjson['id'])
          {
            positioning_length=(that.positioning_station_list[i].length-1)
            state=0
          }
          }
          if(state==0){
            let myicon = new L.DivIcon({
          className: "my-div-iconl",
      
          html:              
            '<div style="pointer-events: none;cursor: default;transform:translateX(-15px)translateY(-50px);width:200' +
            'px;height:1px;">' +
            '<div class="my-div-span" style="pointer-events: none;cursor: default;transform:translateX(-35px)translateY(-10px);color:white;height:10px;line-height:40px; font-size: 20px;">' +
              '<img class="my-div-image_7" src="./tra.svg"/>'+'  '+train_length +
            "</div>"+
            '<br><div class="my-div-span" style="pointer-events: none;cursor: default;transform:translateX(-35px)translateY(-10px);color:white;height:10px;line-height:40px; font-size: 20px;">' +
              '<img class="my-div-image_7" src="./work.svg"/>'+'  '+person_length +
            "</div>"+
            '<br><div class="my-div-span" style="pointer-events: none;cursor: default;transform:translateX(-35px)translateY(-10px);color:white;height:10px;line-height:40px; font-size: 20px;">' +
              '<img class="my-div-image_7" src="./anquan.svg"/>'+'  '+positioning_length +
            "</div>"+
            "</div>",
        });
        const pointmarker = L.marker(
          [stationjson.center[1], stationjson.center[0]],
          {
            icon: myicon,
          }
        )
          .addTo(that.layerGroup.pointsLayerGroup_3)
        }
          
          if(state==1)
          {
            let myicon = new L.DivIcon({
          className: "my-div-iconl",
      
          html:
            '<div style="pointer-events: none;cursor: default;transform:translateX(-15px)translateY(-50px);width:200' +
            'px;height:1px;">' +
            '<div class="my-div-span" style="pointer-events: none;cursor: default;transform:translateX(-35px)translateY(-10px);color:white;height:10px;line-height:40px; font-size: 20px;">' +
             '<img class="my-div-image_7" src="./tra.svg"/>'+'  '+'0'+
            "</div><br>"+
            '<div class="my-div-span" style="pointer-events: none;cursor: default;transform:translateX(-35px)translateY(-10px);color:white;height:10px;line-height:40px; font-size: 20px;">' +
              '<img class="my-div-image_7" src="./work.svg"/>'+'  '+'0'+
            "</div><br>"+
            '<div class="my-div-span" style="pointer-events: none;cursor: default;transform:translateX(-35px)translateY(-10px);color:white;height:10px;line-height:40px; font-size: 20px;">' +
              '<img class="my-div-image_7" src="./anquan.svg"/>'+'  '+'0'+
            "</div>"+
            "</div>",
        });
        const pointmarker = L.marker(
          [stationjson.center[1], stationjson.center[0]],
          {
            icon: myicon,
          }
        )
          .addTo(that.layerGroup.pointsLayerGroup_3)
          }
        }
        }
        let zoomlevel = that.map.getZoom();
        if (zoomlevel >= 17) {
        if (that.map.hasLayer(that.layerGroup.pointsLayerGroup_3)) {
          
        that.layerGroup.pointsLayerGroup_3.eachLayer(item => {
 
         item.setOpacity(0);
 
          });
        } else {
          that.map.addLayer(that.layerGroup.pointsLayerGroup_3);
          that.layerGroup.pointsLayerGroup_3.eachLayer(item => {
 
            item.setOpacity(0);
 
          });
        }



      }
    },
    deleteTrain(res)
    {
      
      let that=this
      for(const key in res.data.deviceInfos)
      {
                    let Layers = that.layerGroup.locomotiveLayerGroup.getLayers();      //11.3 添加删除列车操作
                Layers.map(function (layer){
               if(layer.id==key)
                {
                  that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
                  that.train_list.splice(that.train_list.indexOf(key),1)  
                }
              })
      for(var i in that.train_station_list)  
        {
          var length=that.train_station_list[i].length
          for(var j=1;j<length;j++)  
          if(key==that.train_station_list[i][j])
          {
            {
              let Layers = that.layerGroup.locomotiveLayerGroup.getLayers();      //11.3 添加删除列车操作
                Layers.map(function (layer){
               if(layer.id==key)
                {
                  that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
                  that.train_list.splice(that.train_list.indexOf(key),1)  
                }
              })
              this.train_station_list[i].splice(this.train_station_list[i].indexOf(key),1)
              var train_name='TrainRTInfo:'+key+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+key+'_1'
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(train_name)
              that.sockets.unsubscribe(trainwarn_name)
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==train_name)  
        that.require.channels.splice(that.require.channels.indexOf(train_name),1) 
        if(that.require.channels[i]==trainwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(trainwarn_name),1) 

        }
            }
          };
        }
      }   
    },
    createTrain(res)
    {
      let that=this
      for(const key in res.data.deviceInfos)
      {
      var score=1
      for(var i in that.train_station_list)  
        {
          
          if(res.data.deviceInfos[key]==that.train_station_list[i][0])
          {
            var state=0
            for(const c in that.train_station_list[i])
            if(key==that.train_station_list[i][c])
            state=1
            if(state==0)
            {
              that.train_station_list[i].push(key)
              if(that.station_sub_list.includes(that.train_station_list[i][0]))  //11.3修改车辆订阅逻辑
              {
              var train_name='TrainRTInfo:'+key+'_1'
              var trainwarn_name='TrainPreWarnInfo:'+key+'_1'
              that.require.channels.push(train_name)    
              that.require.channels.push(trainwarn_name)    
              that.$bus.$emit('Subscribe', that.require)     
              that.sockets.subscribe(train_name, res => {
              // console.log(res.data.devices)
              
              that.renderTrainDevice(res.data)
              })
              that.sockets.subscribe(trainwarn_name, res => {
              // console.log(res.data.devices)
              that.updateTrainPopup(res.data)
              })
              }
            }
            score=0
          };
        } 
        if(i)
        i++
        else i=0
        if(score==1)
        {
                    that.train_station_list[i]=[]
                    that.train_station_list[i].push(res.data.deviceInfos[key])
                    that.train_station_list[i].push(key) 
                    if(that.station_sub_list.includes(that.train_station_list[i][0]))  //11.4修改无车站订阅逻辑
                    {   
                    var train_name='TrainRTInfo:'+key+'_1'
                    var trainwarn_name='TrainPreWarnInfo:'+key+'_1'
                    that.require.channels.push(train_name)    
                    that.require.channels.push(trainwarn_name)    
                    that.$bus.$emit('Subscribe', that.require)     
                    that.sockets.subscribe(train_name, res => {
                    // console.log(res.data.devices)
                    
                    that.renderTrainDevice(res.data)
                    })
                    that.sockets.subscribe(trainwarn_name, res => {
                    // console.log(res.data.devices)
                    that.updateTrainPopup(res.data)
                    })
                    }     
        }

      }
    },


    deletePerson(res)
    {
      let that=this
      var i=0
      var j=1
      for(var key in res.data.deviceInfos)
      {
      for(i in this.person_station_list)  
        {

          var length=this.person_station_list[i].length
          if(this.person_station_list[i])
          for(j=1;j<length;j++)  
          if(key==this.person_station_list[i][j])
          {
            {
              let Layers = this.layerGroup.persionLayerGroup.getLayers();      //11.3 添加删除人员操作
                Layers.map(function (layer){
               if(layer.id==key)
                {
                  that.layerGroup.persionLayerGroup.removeLayer(layer)
                  that.person_list.splice(that.person_list.indexOf(key),1)  
                }
              })

              this.person_station_list[i].splice(this.person_station_list[i].indexOf(key),1)
              var person_name='GnssInfo:'+key+"_2"
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_2'
              var personrt_name='PersonRTInfo_HT:'+key+'_2'  
              // that.$bus.$emit('Unsubscribe', that.require) 
              this.sockets.unsubscribe(person_name)
              this.sockets.unsubscribe(personwarn_name)
              this.sockets.unsubscribe(personrt_name)
              for(var i=0;i<this.require.channels.length;i++)
        {
        if(this.require.channels[i]==person_name)  
        this.require.channels.splice(this.require.channels.indexOf(person_name),1) 
        if(this.require.channels[i]==personwarn_name)
        this.require.channels.splice(this.require.channels.indexOf(personwarn_name),1) 
        if(this.require.channels[i]==personrt_name)
        this.require.channels.splice(this.require.channels.indexOf(personrt_name),1) 
        }
              
            }
          };
        }
      }   
    },
    createPerson(res)
    {
      
      let that=this
      
      for(const key in res.data.deviceInfos)
      {
      var score=1
      var i
      for(i in that.person_station_list)  
        {
          
          if(res.data.deviceInfos[key]==that.person_station_list[i][0])
          {
            var state=0
            for(const c in that.person_station_list[i])
            if(key==that.person_station_list[i][c])
            state=1
            if(state==0)
            {
              that.person_station_list[i].push(key)
              if(that.station_sub_list.includes(that.person_station_list[i][0]))  //11.3修改人员订阅逻辑
              {
              var person_name='GnssInfo:'+key+'_2'
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_2'
              var personrt_name='PersonRTInfo_HT:'+key+'_2'              
              that.require.channels.push(person_name)    
              that.require.channels.push(personwarn_name)
              that.require.channels.push(personrt_name)
              that.$bus.$emit('Subscribe', that.require)    
              that.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              that.renderPeopleDevice(res.data)
              })
              that.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              that.updatePersonPopup(res.data)
              })
              that.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
              that.updatePersonRT(res.data)
              })
              }
            }
            score=0
          }
        }
        if(i)
        i++
        else i=0 
        if(score==1)
        {
                    that.person_station_list[i]=[]
                    that.person_station_list[i].push(res.data.deviceInfos[key])
                    that.person_station_list[i].push(key) 
                    if(that.station_sub_list.includes(that.person_station_list[i][0]))  //11.4修改无车站订阅逻辑
                    {          
                     var person_name='GnssInfo:'+key+'_2'
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_2'
              var personrt_name='PersonRTInfo_HT:'+key+'_2'              
              that.require.channels.push(person_name)    
              that.require.channels.push(personwarn_name)
              that.require.channels.push(personrt_name)
              that.$bus.$emit('Subscribe', that.require)    
              that.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              that.renderPeopleDevice(res.data)
              })
              that.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              that.updatePersonPopup(res.data)
              })
              that.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
              that.updatePersonRT(res.data)
              })
                }
                  }

      }
    },

    deletePositioning(res)
    {
      
      let that=this
      for(const key in res.data.deviceInfos)
      {
      for(var i=0;i<that.positioning_station_list.length;i++)  
        {
          for(var j=0;j<that.positioning_station_list[i].length;j++)  
          if(key==that.positioning_station_list[i][j])
          {
            {
              let Layers = that.layerGroup.persionLayerGroup.getLayers();      //11.3 添加删除人员操作
                Layers.map(function (layer){
               if(layer.id==key)
                {
                  // that.layerGroup.persionLayerGroup.removeLayer(layer)
                }
              })
              that.positioning_station_list[i].splice(that.positioning_station_list[i].indexOf(key),1)
              var person_name='GnssInfo:'+key+"_3"
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_3'
              var personrt_name='PersonRTInfo_HT:'+key+'_3'  
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(person_name)
              that.sockets.unsubscribe(personwarn_name)
              that.sockets.unsubscribe(personrt_name)
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==person_name)  
        that.require.channels.splice(that.require.channels.indexOf(person_name),1) 
        if(that.require.channels[i]==personwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(personwarn_name),1) 
        if(that.require.channels[i]==personrt_name)
        that.require.channels.splice(that.require.channels.indexOf(personrt_name),1) 
        }
            }
          };
        }
      }   
    },
    createPositioning(res)
    {
      // debugger
      let that=this
      for(const key in res.data.deviceInfos)
      {
      var score=1
      for(var i=0;i<that.positioning_station_list.length;i++)  
        {
          
          if(res.data.deviceInfos[key]==that.positioning_station_list[i][0])
          {
            var state=0
            for(const c in that.positioning_station_list[i])
            if(key==that.positioning_station_list[i][c])
            state=1
            if(state==0)
            {
              that.positioning_station_list[i].push(key)
              if(that.station_sub_list.includes(that.person_station_list[i][0]))  //11.3修改人员订阅逻辑
              {
              var person_name='GnssInfo:'+key+'_3'
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_3'
              var personrt_name='PersonRTInfo_HT:'+key+'_3'              
              that.require.channels.push(person_name)    
              that.require.channels.push(personwarn_name)
              that.require.channels.push(personrt_name)
              that.$bus.$emit('Subscribe', that.require)    
              that.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              that.renderPeopleDevice(res.data)
              })
              that.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              that.updatePersonPopup(res.data)
              })
              that.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
              that.updatePersonRT(res.data)
              })
              }
            }
            score=0
          };
        } 
        if(score==1)
        {
                    that.positioning_station_list[i]=[]
                    that.positioning_station_list[i].push(res.data.deviceInfos[key])
                    that.positioning_station_list[i].push(key) 
                    if(that.station_sub_list.includes(that.positioning_station_list[i][0]))  //11.4修改无车站订阅逻辑
                    {          
                     var person_name='GnssInfo:'+key+'_3'
              var personwarn_name='PersonPreWarnInfo_HT:'+key+'_3'
              var personrt_name='PersonRTInfo_HT:'+key+'_3'              
              that.require.channels.push(person_name)    
              that.require.channels.push(personwarn_name)
              that.require.channels.push(personrt_name)
              that.$bus.$emit('Subscribe', that.require)    
              that.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              that.renderPeopleDevice(res.data)
              })
              that.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              that.updatePersonPopup(res.data)
              })
              that.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
              that.updatePersonRT(res.data)
              })
                }
        }

      }
    },






    

    taskchange(res){
        
        let that=this
        if(this.station_task[res.data.fenceStations[0]]==undefined)
        {
          this.station_task[res.data.fenceStations[0]]=[]
        }
         
      {
          if(!this.station_task[res.data.fenceStations[0]].includes(res.data.taskId))
           this.station_task[res.data.fenceStations[0]].push(res.data.taskId)
    
          this.task_fence[res.data.taskId]={}
          this.task_fence[res.data.taskId].type=res.data.type
          this.task_fence[res.data.taskId].state=res.data.state
        
                
 

          getTaskFence(res.data.taskId).then((response)=>{
          {
            
    
            that.task_fence[res.data.taskId]={
                fenceid:'',
                begintime:'',
                endtime:'',
                type:'',
                state:''
              }
            that.task_fence[res.data.taskId].fenceid=response.data.fenceIds[0]
            that.task_fence[res.data.taskId].begintime=response.data.beginTime_plan
          that.task_fence[res.data.taskId].endtime=response.data.endTime_plan  
          that.task_fence[res.data.taskId].type=response.data.type  
          that.task_fence[res.data.taskId].state=response.data.state  
      var taskid=res.data.taskId
      var state=response.data.state

      if(response.data.fenceStations[0]!=undefined)
      var stationid=response.data.fenceStations[0]   
          


          {
            for(var i=0;i<that.station_sub_list.length;i++)
            if(that.station_sub_list[i]==stationid)
            {
          if(state==5)
          {

          //for(var k=0; k<that.task_fence[taskid].fenceid.length;k++)
          {
            var the_taskid=taskid
 
            //that.initFence(that.task_fence[taskid].fenceid[0],2,the_taskid) //0212
            if(that.fence_showns.includes(that.task_fence[taskid].fenceid))
            {
              that.deletefence(that.task_fence[taskid].fenceid)
              that.initFence(that.task_fence[taskid].fenceid,2,the_taskid)
            }
          else {that.initFence(that.task_fence[taskid].fenceid,2,the_taskid)
            that.fence_showns.push(that.task_fence[taskid].fenceid)
          }
          }
             
          }
        }
        if(state!=5)
          {

             
 
            {
              if(this.fence_showns.includes(that.task_fence[taskid].fenceid))
              {
                this.deletefence(that.task_fence[taskid].fenceid)
              //   for(var j;j<this.task_fence[taskid].fenceid.length;j++)
              //   {
              //     if(this.task_fence[taskid].fenceid[j]==this.task_fence[taskid].fenceid[i])    
              //     {
              //       this.task_fence[taskid].fenceid.splice(this.task_fence[taskid].fenceid.indexOf(this.task_fence[taskid].fenceid[i]),1)
                      
              //   } 
              // }
            }
          }     
        }
      }
        
      }  }).catch(error => {
              if(error.message.includes('timeout')){
                  this.requestState=true
              }  
              })


      }

    },







    getDataFromNative(para1,para2){
      this.setPerson_lists(para1)
    },
    setPerson_lists(data){
      this.person_lists[1]=data
    },
// 点击设备按钮弹出弹框
// clickRect (val) {
//   // 动态展示设备弹框
//   let exist = false
//   this.devDialogs.forEach(element => {
//     if (val === element.devCode) {
//       exist = true
//     }
//   })
//   if (!exist) {
//     let devOne = {
//       devCode: val,
//       box: 'box' + val,
//       title: 'title' + val,
//       left: '20px',
//       top: '20px'
//     }
//     this.devDialogs.push(devOne)
//     this.$nextTick(() => {
//       this.divMove(devOne.title, devOne.box)
//     })
//   }
// },
// 关闭设备弹框
closeDialog (devOne) {
  let that=this
  var left
  this.devDialogs.forEach(function (item, index, arr) {
   
    if (item.devCode === devOne.devCode) {
      arr.splice(index, 1)
      left=item.leftnum
      if(that.warning_list.length>0){
        for(var i=that.devDialogs.length;i>0;i--)
        that.devDialogs[i]=that.devDialogs[i-1]
        that.devDialogs[0]=(that.warning_list.pop())
        that.devDialogs[0].leftnum=that.devDialogs.length*200+120
        that.devDialogs[0].left=that.devDialogs[that.devDialogs.length-1].leftnum+'px'
      }

      
    }
    if(that.warning_list.length==0)
    that.warningDialog=false
  })
  

  for(const i in this.devDialogs)
  {
    if(this.devDialogs[i].leftnum>left)
    {
      this.devDialogs[i].leftnum-=200
      this.devDialogs[i].left=this.devDialogs[i].leftnum+'px'
    }
  }
  
},



closeDialog_2 (data) {
  let that=this
  this.warning_list.forEach(
    
    function (item, index, arr) {
   
    if (item.devCode === data) {
      arr.splice(index, 1)
      that.warning_lists={
        devCode:1001,
        box:1002,
        left:'120px',
        leftnum:120,
        bottom:'30px',
        title:10,
      }
      
    }

  })
  if(this.warning_list.length==0)
    this.warningDialog=false
  
},



    updatestate(){
      this.the_state=0
      if(this.train_lists[1]>0)
      this.selectChanged(this.train_lists[1])
      else if(this.person_lists[1]>0) 
      this.selectChanged_person(this.person_lists[1])
    },
    updatestate_person(){
      this.the_state=0
      this.selectChanged_person(this.person_lists[1])
    },
handleStatusChange(status) {

  this.switch_status=1

      if(status==0)
      this.switch_status=1
      else if(status==1)
      this.switch_status=0
    },
      setreplay()
      {
        let that=this
        var speed
        var data
        var state2
        if(this.forward_lists=="转发")
          state2=1
        else if(this.forward_lists=="不转发")
          state2=0
        //debugger  
        if(this.replayspeed_lists=="0.5X")
          speed=100
        else if(this.replayspeed_lists=="0.75X")
          speed=150
        else if(this.replayspeed_lists=="1X")
          speed=200  
        else if(this.replayspeed_lists=="1.25X")
          speed=250
        else if(this.replayspeed_lists=="1.5X")
          speed=300  
        else if(this.replayspeed_lists=="2X")
          speed=400
        data={
          "forward_list":1,
          'speed':speed,
          'deviceid':this.select_deviceid_2
        }
        data.forward_list=state2  

        startTraceReplay(data).then((response)=>{
        })
        that.updatePersonPosition
      },
      postControllerState()    //10.26摇杆操纵属性设置
      {
         if(this.storage_person_list.includes(this.select_deviceid))
        {
        }
        else{
          this.storage_person_list.push(this.select_deviceid)
        } 
        let that=this
        var state1
        if(this.storage_lists=="存储")
          state1=1
        else if(this.storage_lists=="不存储")
          state1=0
        var state2
        if(this.forward_lists=="转发")
          state2=1
        else if(this.forward_lists=="不转发")
          state2=0
        if(this.speed_lists=="慢")
          this.speed_state=0.5
        else if(this.speed_lists=="正常")
          this.speed_state=1
        else if(this.speed_lists=="快")
          this.speed_state=2
        var data={
          "storage_list":1,
          "forward_list":1,
        }
        //debugger
        data.storage_list=state1
        data.forward_list=state2        
        postController(data).then((response)=>{
      
          })  
          
      },
      postTrack(){
        let that=this

        var state
        if(this.fen_lists=="开放")
          state=1
        else if(this.fen_lists=="封闭")
          state=0
        var track_no
        var station_no
        let Layers = this.layerGroup.linesLayerGroup.getLayers();
        for(var i=0;i<that.lines_list.length;i++)
        Layers[0].getLayers().map(function (item){

          if(item.id==that.lines_list[i])
          {
            station_no=item.stationid
            track_no=item.postfenceid
          }
        })
        var data={
          "fence_type":1,
          "station_no":1,
          "track_no":1
        }
        //debugger
  
        data.fence_type=state
        data.station_no=station_no        
        data.track_no=track_no

        postfenceTrack(data).then((response)=>{

            this.initFence(response.data,2,-1)
          })
        this.lines_list=[]
        this.fen_lists=1       
      },
      checkfencestate(){
        let that=this
        
          that.fence_showns=[]
          that.task_fence={}
          that.station_task={}
            let layers=that.layerGroup.geofencingLayerGroup.getLayers();
    
            layers.map(function (layer){
              that.layerGroup.geofencingLayerGroup.removeLayer(layer)
            })
            getStationTask().then((response)=>{
              if(response.code==0)
              that.rendeStationTask(response.data.item)
              else that.requestState=true
            }).catch(error => {
                  if(error.message.includes('timeout')){
                    that.requestState=true
                  }  
                  })
          if(this.delaytime==1)
          setTimeout(this.checkfencestate,60000) 
      },
      delaydelete(){
        let that=this
        
        TWS(1).then((response)=>{
          if(response.code==0)
          {
                 //11.4添加定时检查车站列车情况
    //  debugger
    let layers=this.layerGroup.locomotiveLayerGroup.getLayers();
      layers.map(function (layer){
        var exist_state=0
        for(const key in response.data.deviceInfos)
        {
          if(key==layer.id)
          exist_state=1
        }
        if(exist_state==0)
        {
              var train_name='TrainRTInfo:'+layer.id+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+layer.id+'_1'
              that.sockets.unsubscribe(train_name)
              that.sockets.unsubscribe(trainwarn_name)
              that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
              that.train_list.splice(that.train_list.indexOf(layer.id),1)
                    for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==train_name)  
        that.require.channels.splice(that.require.channels.indexOf(train_name),1) 
        if(that.require.channels[i]==trainwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(trainwarn_name),1) 

        }
        }
            })

      var score
      var length=0
      //debugger
      that.train_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.train_station_list[i][0])
          {

            that.train_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.train_station_list[i]=[]
                    that.train_station_list[i].push(response.data.deviceInfos[key])
                    that.train_station_list[i].push(key)
                     length=length+1           
        }

      }  

      that.train_station_list.length=length 

    
          }
          // else this.requestState=true
        })

    TWS(2).then((response)=>{
      if(response.code==0)
      {
            //11.4添加定时检查车站手持终端情况
    //  debugger
    let layers=this.layerGroup.persionLayerGroup.getLayers();
      let that=this
      layers.map(function (layer){
        
        var exist_state=0
        for(const key in response.data.deviceInfos)
        {
          if(key==layer.id)
          exist_state=1
        }
        if(exist_state==0)
        {
              var person_name='GnssInfo:'+layer.id+"_2"
              var personwarn_name='PersonPreWarnInfo_HT:'+layer.id+'_2'
              var personrt_name='PersonRTInfo_HT:'+layer.id+'_2'  
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(person_name)
              that.sockets.unsubscribe(personwarn_name)
              that.sockets.unsubscribe(personrt_name)
              that.layerGroup.persionLayerGroup.removeLayer(layer)
              that.person_list.splice(that.person_list.indexOf(layer.id),1)
                for(var i=0;i<this.require.channels.length;i++)
        {
        if(this.require.channels[i]==person_name)  
        this.require.channels.splice(this.require.channels.indexOf(person_name),1) 
        if(this.require.channels[i]==personwarn_name)
        this.require.channels.splice(this.require.channels.indexOf(personwarn_name),1) 
        if(this.require.channels[i]==personrt_name)
        this.require.channels.splice(this.require.channels.indexOf(personrt_name),1) 
        }
        }
            })
      var score
      var length=0
      //debugger
      that.person_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.person_station_list[i][0])
          {
  
            that.person_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.person_station_list[i]=[]
                    that.person_station_list[i].push(response.data.deviceInfos[key])
                    that.person_station_list[i].push(key)
                     length=length+1           
        }

      }  
  
      that.person_station_list.length=length 
 
    
      }
      // else this.requestState=true
    })

    TWS(3).then((response)=>{
      if(response.code==0)
      {
          //11.4添加定时检查车站定位终端情况
    //  debugger

      var score
      var length=0
      //debugger
      that.positioning_station_list=[]
      for(const key in response.data.deviceInfos)
      {
      score=1
      for(var i=0;i<length;i++)  
        {
          if(response.data.deviceInfos[key]==that.positioning_station_list[i][0])
          {

            that.positioning_station_list[i].push(key)
            score=0
          };
        } 
        if(score==1)
        {
                    that.positioning_station_list[i]=[]
                    that.positioning_station_list[i].push(response.data.deviceInfos[key])
                    that.positioning_station_list[i].push(key)
                     length=length+1           
        }

      }  
   
      that.positioning_station_list.length=length 
 
        
      }
      // else this.requestState=true
    })
        

        for(const c of this.station_sub_list)
        {
               
        if(this.train_lists[1]>0||this.person_lists[1]>0)
        {}
        else this.station_follow_list=[]

        if(this.station_follow_list.includes(c)||this.station_view_list.includes(c)||c==0)
        {
          ;
        }
        else{
          this.unsub_station(c)         
        }
        }
    
        let Layers=this.layerGroup.persionLayerGroup.getLayers();

          Layers.map(function (layer){
            
            var state_2=1
            if(that.station_sub_list.includes(layer.stationNo))
            state_2=0
            if(state_2==1)
            {
              // that.layerGroup.persionLayerGroup.removeLayer(layer)
              for(var i=0;i<that.person_list.length;i++)
              {
                if(that.person_list[i]==layer.id)    
              {
                that.person_list.splice(that.person_list.indexOf(layer.id),1)
              }    
              }
              var person_name='GnssInfo:'+layer.id+"_2"
              var personwarn_name='PersonPreWarnInfo_HT:'+layer.id+'_2'
              var personrt_name='PersonRTInfo_HT:'+layer.id+'_2'  
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(person_name)
              that.sockets.unsubscribe(personwarn_name)
              that.sockets.unsubscribe(personrt_name)
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==person_name)  
        that.require.channels.splice(that.require.channels.indexOf(person_name),1) 
        if(that.require.channels[i]==personwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(personwarn_name),1) 
        if(that.require.channels[i]==personrt_name)
        that.require.channels.splice(that.require.channels.indexOf(personrt_name),1) 
        }
              var person_name='GnssInfo:'+layer.id+"_3"
              var personwarn_name='PersonPreWarnInfo_HT:'+layer.id+'_3'
              var personrt_name='PersonRTInfo_HT:'+layer.id+'_3'
              that.sockets.unsubscribe(person_name)
              that.sockets.unsubscribe(personwarn_name)
              that.sockets.unsubscribe(personrt_name) 
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==person_name)  
        that.require.channels.splice(that.require.channels.indexOf(person_name),1) 
        if(that.require.channels[i]==personwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(personwarn_name),1) 
        if(that.require.channels[i]==personrt_name)
        that.require.channels.splice(that.require.channels.indexOf(personrt_name),1) 
        }
        that.layerGroup.persionLayerGroup.removeLayer(layer)
        that.person_list.splice(that.person_list.indexOf(layer),1)  
            }
          })

        for(var i=0;i<this.positioning_station_list.length;i++)      //11.4定时增减定位终端订阅逻辑
        {
          var state=0;
          var state_2=0
 
          if(this.station_sub_list.includes(this.positioning_station_list[i][0]))
          {
            for(var j=1;j<positioning_station_list[i].length;j++)
            {
              state=0
              let Layers=this.layerGroup.persionLayerGroup.getLayers();
              Layers.map(function (layer){
                if(layer.id==that.positioning_station_list[i][j])
                state=1 
              }) 
              if(state==0)
                {
                  var person_name='GnssInfo:'+that.positioning_station_list[i][j]+'_3'
                  var personwarn_name='PersonPreWarnInfo_HT:'+that.positioning_station_list[i][j]+'_3'
                  var personrt_name='PersonRTInfo_HT:'+that.positioning_station_list[i][j]+'_3'              
                  that.require.channels.push(person_name)    
                  that.require.channels.push(personwarn_name)
                  that.require.channels.push(personrt_name)
                  that.$bus.$emit('Subscribe', that.require)    
                  that.sockets.subscribe(person_name, res => {
                  // console.log(res.data.devices)
                  that.renderPeopleDevice(res.data)
                  })
                  that.sockets.subscribe(personwarn_name, res => {
                  // console.log(res.data.devices)
                  that.updatePersonPopup(res.data)
                  })
                  that.sockets.subscribe(personrt_name, res => {
                  // console.log(res.data.devices)
                  that.updatePersonRT(res.data)
                  })
                }
            }

          }
        }

     
        for(var i in this.person_station_list)      //11.4定时增减手持终端订阅逻辑
        {
          
          var state=0;
          let Layers=this.layerGroup.persionLayerGroup.getLayers();
          if(this.station_sub_list.includes(this.person_station_list[i][0]))
          {
            for(var j=1;j<this.person_station_list[i].length;j++)
            {
              state=0
              Layers.map(function (layer){
                if(layer.id==that.person_station_list[i][j])
                state=1 
              }) 
              if(state==0)
                {
                  var person_name='GnssInfo:'+that.person_station_list[i][j]+'_2'
                  var personwarn_name='PersonPreWarnInfo_HT:'+that.person_station_list[i][j]+'_2'
                  var personrt_name='PersonRTInfo_HT:'+that.person_station_list[i][j]+'_2'              
                  that.require.channels.push(person_name)    
                  that.require.channels.push(personwarn_name)
                  that.require.channels.push(personrt_name)
                  that.$bus.$emit('Subscribe', that.require)    
                  that.sockets.subscribe(person_name, res => {
                  // console.log(res.data.devices)
                  that.renderPeopleDevice(res.data)
                  })
                  that.sockets.subscribe(personwarn_name, res => {
                  // console.log(res.data.devices)
                  that.updatePersonPopup(res.data)
                  })
                  that.sockets.subscribe(personrt_name, res => {
                  // console.log(res.data.devices)
                  that.updatePersonRT(res.data)
                  })
                }
            }

          }
        }


        for(var i in this.train_station_list)      //11.4定时增减列车订阅逻辑
        {
          var state=0;
          let Layers=this.layerGroup.locomotiveLayerGroup.getLayers();
          var state_2=1
          Layers.map(function (layer){

            state_2=0
            if(that.station_sub_list.includes(layer.stationid))
            state_2=1
            if(state_2==0)
            {
              // that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
              var train_name='TrainRTInfo:'+layer.id+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+layer.id+'_1'
              // that.$bus.$emit('Unsubscribe', that.require) 
              that.sockets.unsubscribe(train_name)
              that.sockets.unsubscribe(trainwarn_name)
              for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==train_name)  
        that.require.channels.splice(that.require.channels.indexOf(train_name),1) 
        if(that.require.channels[i]==trainwarn_name)
        that.require.channels.splice(that.require.channels.indexOf(trainwarn_name),1) 
        }
            }
          })
          if(this.station_sub_list.includes(this.train_station_list[i][0]))
          {
            for(var j=1;j<this.train_station_list[i].length;j++)
            {
              state=0
              Layers.map(function (layer){
                if(layer.id==that.train_station_list[i][j])
                state=1 
              }) 
              if(state==0)
                {
                  
                  var train_name='TrainRTInfo:'+that.train_station_list[i][j]+'_1'
                  var trainwarn_name='TrainPreWarnInfo:'+that.train_station_list[i][j]+'_1'
                  if(!that.require.channels.includes(train_name))
                  {
                    that.require.channels.push(train_name)    
                    that.require.channels.push(trainwarn_name)    
                    that.$bus.$emit('Subscribe', that.require)    
                    that.sockets.subscribe(train_name, res => {
                    // console.log(res.data.devices)
                    
                    that.renderTrainDevice(res.data)
                    })
                    that.sockets.subscribe(trainwarn_name, res => {
                    // console.log(res.data.devices)
                    that.updateTrainPopup(res.data)
                    })
                  }

                }
            }

          }
        }






        if(this.delaytime==1)
          setTimeout(this.delaydelete,3000)    
      },
      sub_station(stationid)
      {
        
        let that=this
       
   
                 
        getStatus(stationid).then((response)=>{
          for(const key in response.data)
          {
            if(key==stationid)
            {
              if(response.data[key]==0)
              {
                getDSS(stationid).then((response)=>{
                  this.renderOneStationDevices(response.data,response.data)
                }).catch(error => {
                    if(error.message.includes('timeout')){
                        this.requestState=true
                    }  
                    })
              }
              else
              {
                var data={}
                data.stationNo=key
                this.renderOneStationDevices(this.stationLineData[key],data)
              }

            }
          }
        }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
        // TWS(1).then((response)=>{
        //   this.updateTWS(response.data)
        // })
        if(stationid!=0)
        {
        var station_id_2='StationDSS:'+stationid
        var _list='stationinfo'+ stationid    
                        this.require.channels.push(station_id_2)   
                                    this.require.channels.push(_list)   
            this.$bus.$emit('Subscribe', this.require)      
        this.sockets.subscribe(station_id_2, res => {

        this.renderOneStationDevices(res.data,res.props)
        })
        }
  

        //debugger
        for(var i in that.train_station_list)  
        {

          if(stationid==that.train_station_list[i][0]&&stationid!=0)
          {
            for(var j=1;j<that.train_station_list[i].length;j++)
            {
              var train_name='TrainRTInfo:'+that.train_station_list[i][j]+'_1'
              var trainwarn_name='TrainPreWarnInfo:'+that.train_station_list[i][j]+'_1'
              if(!that.require.channels.includes(train_name))
              {
                that.require.channels.push(train_name)    
                that.require.channels.push(trainwarn_name)    
                that.$bus.$emit('Subscribe', that.require)     
                that.sockets.subscribe(train_name, res => {
              // console.log(res.data.devices)
              
                that.renderTrainDevice(res.data)
                })
                that.sockets.subscribe(trainwarn_name, res => {
              // console.log(res.data.devices)
                that.updateTrainPopup(res.data)
                })
              }
  
            }
          };
        } 
        for(var i in that.person_station_list)  
        {
          if(stationid==that.person_station_list[i][0]&&stationid!=0)
          {
            for(var j=1;j<that.person_station_list[i].length;j++)
            {
              
              var person_name='GnssInfo:'+that.person_station_list[i][j]+'_2'
              var personwarn_name='PersonPreWarnInfo_HT:'+that.person_station_list[i][j]+'_2'
              var personrt_name='PersonRTInfo_HT:'+that.person_station_list[i][j]+'_2' 
              if(!that.require.channels.includes(person_name))
              {
                that.require.channels.push(person_name)    
              that.require.channels.push(personwarn_name)
              that.require.channels.push(personrt_name)
    
              that.$bus.$emit('Subscribe', that.require)    
              that.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              that.renderPeopleDevice(res.data)
              })
              that.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              that.updatePersonPopup(res.data)
              })
              that.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
                that.updatePersonRT(res.data)
                })
              }             

            }
          };
        } 
        for(var i=0;i<that.positioning_station_list.length;i++)  
        {
          if(stationid==that.positioning_station_list[i][0]&&stationid!=0)
          {
            for(var j=1;j<that.positioning_station_list[i].length;j++)
            {
              var person_name='GnssInfo:'+that.positioning_station_list[i][j]+'_3'
              var personwarn_name='PersonPreWarnInfo_HT:'+that.positioning_station_list[i][j]+'_3'
              var personrt_name='PersonRTInfo_HT:'+that.positioning_station_list[i][j]+'_3'              
              that.require.channels.push(person_name)    
              that.require.channels.push(personwarn_name)
              that.require.channels.push(personrt_name)
              that.$bus.$emit('Subscribe', that.require)    
              that.sockets.subscribe(person_name, res => {
              // console.log(res.data.devices)
              that.renderPeopleDevice(res.data)
              })
              that.sockets.subscribe(personwarn_name, res => {
              // console.log(res.data.devices)
              that.updatePersonPopup(res.data)
              })
              that.sockets.subscribe(personrt_name, res => {
              // console.log(res.data.devices)
              that.updatePersonRT(res.data)
              })
            }
          };
        } 
        


        
        
        if(that.station_task[stationid]!=undefined)
        for(var j=0;j<that.station_task[stationid].length;j++)
        {
          {
            var the_taskid=that.station_task[stationid][j]
            if(this.task_fence[the_taskid].state==5)
            if(this.fence_showns.includes(that.task_fence[that.station_task[stationid][j]].fenceid))
            {}
          else {this.initFence(that.task_fence[that.station_task[stationid][j]].fenceid,2,the_taskid)
                this.fence_showns.push(that.task_fence[that.station_task[stationid][j]].fenceid)
          }
          }
        } 
      },

      unsub_station(stationid)
      {

        //debugger        
        let that=this
        var station_id='StationDSS_All:'+stationid
        var station_id_2='StationDSS:'+stationid
        var _list='stationinfo'+ stationid   

        // that.$bus.$emit('Unsubscribe', that.require) 
        that.sockets.unsubscribe(station_id)
        that.sockets.unsubscribe(station_id_2) 
        that.sockets.unsubscribe(_list) 
        for(var i=0;i<that.require.channels.length;i++)
        {
        if(that.require.channels[i]==station_id)  
        that.require.channels.splice(that.require.channels.indexOf(station_id),1) 
        if(that.require.channels[i]==station_id_2)
        that.require.channels.splice(that.require.channels.indexOf(station_id_2),1) 
        if(that.require.channels[i]==_list)
        that.require.channels.splice(that.require.channels.indexOf(_list),1) 
        }

        var i=0
        for(i;i<this.station_sub_list.length;i++)
        {
          if(this.station_sub_list[i]==stationid)    
          {
            this.station_sub_list.splice(this.station_sub_list.indexOf(stationid),1)
          }    
        }

      },


      selectChanged(value) {
        let that=this
        this.person_lists=[1,-1]       
        var stationId
        this.curStationName='请选择车站'
        for(var i in that.train_station_list)  
        {
          for(var j=1;j<that.train_station_list[i].length;j++)  
          if(value==that.train_station_list[i][j])
          stationId=that.train_station_list[i][0]  
        }

          if(value==-1||value==undefined)
          that.station_follow_list=[]
        else if(that.station_sub_list.includes(stationId))
        {
          if(that.station_follow_list.includes(stationId))
          {}
          else that.station_follow_list.push(stationId)
        }
        else{
          that.station_follow_list.push(stationId)
          that.sub_station(stationId)
        that.station_sub_list.push(stationId)
        } 



      let Layers = this.layerGroup.locomotiveLayerGroup.getLayers();

      Layers.map(function (layer){
        if(layer.id==value&&that.the_state==0)
        {
   
          that.the_state_2=1
          let center = L.latLng(layer._latlng.lat, layer._latlng.lng);
          that.the_state_2=1
          if (that.map.getZoom() < 17) 
        that.map.setView(center,20);
        else  that.map.setView(center);
          that.the_state_2=1
       
  
          that.map.setBearing(-layer.rotate+90+that.map.getBearing())
          
          // layer.openPopup();
          }
        })
        
      },
      selectChanged_person(value) {

        var stationId

        this.curStationName='请选择车站'
              let that=this
   
        for(var i in that.person_station_list)  
        {
          for(var j=1;j<that.person_station_list[i].length;j++)  
          if(value==that.person_station_list[i][j])
          stationId=that.person_station_list[i][0]  
        }

        if(value==1)
          that.station_follow_list=[]
        else if(that.station_sub_list.includes(stationId))
        {
          if(that.station_follow_list.includes(stationId))
          {}
          else that.station_follow_list.push(stationId)
        }
        else{
          that.station_follow_list.push(stationId)
          that.sub_station(stationId)
        that.station_sub_list.push(stationId)
        } 
      let Layers = this.layerGroup.persionLayerGroup.getLayers();

      Layers.map(function (layer){
        if(layer.id==value&&that.the_state==0)
        {

          that.the_state_2=1
          let center = L.latLng(layer._latlng.lat, layer._latlng.lng);
          that.the_state_2=1
          if (that.map.getZoom() < 17) 
        that.map.setView(center,20);
        else  that.map.setView(center);
          that.the_state_2=1
        //   let Layerss = that.layerGroup.linesLayerGroup.getLayers();
        //   Layerss[0].getLayers().map(function (item){
            
        //   var options = {units: 'kilometers'};  
        //   console.log(center)    
        //   console.log(item.feature)  
        //   var the_point= turf.nearestPointOnLine(item.feature, center, options)
        //   console.log('()_+__+_+_++_+_+=')
        //   console.log(the_point)
        //   // layer.openPopup();
          
        // })
      
      

          }
        })
        
      },
    //初始化地图
    initMap() {
      this.map = this.$mapnew.createMap("map-container", this.option);
      this.map.allowSelfIntersection;
      var zoomControl = L.control.zoom({
        // 放大按钮的标题
        zoomOutTitle: "放大",
        // 缩小按钮的标题
        zoomInTitle: "缩小",
        // 控件位置，'topleft', 'topright', 'bottomleft', 'bottomright'
        position: "bottomleft",
      });
      let that = this;
      // 添加缩放控件到地图
      this.map.addControl(zoomControl);
      this.initDrawCtrl();
      that.changeDivHeight();
      var places = [
        {
          label: "工具",
          value: "tool",
          items: [
            {
              label: "选取围栏",
              value: "measureTool",
              items: [
                // { label: "测距", value: "measurement" },
                { label: "按点选取", value: "area" },
                // { label: "删除", value: "delete" },
              ],
            },
            {
              label: "取坐标",
              value: "takeCoordinates",
              items: [
                { label: "点", value: "Marker" },
                { label: "多边形", value: "Polygon" },
                { label: "矩形", value: "Rectangle" },
                { label: "圆形", value: "Circle" },
              ],
            },
          ],
        },
      ];
      // let toolmenu = L.control
      //   .select({
      //     position: "topleft",
      //     selectedDefault: false,
      //     items: places,
      //     onSelect: function (newItemValue) {
      //       if (
      //         newItemValue == "measurement" ||
      //         newItemValue == "area" ||
      //         newItemValue == "delete"
      //       ) {
      //         that.distanceMeasurement(newItemValue);
      //       } else {
      //         that.drawShape(newItemValue, "2");
      //       }
      //     },
      //   })
      //   .addTo(this.map);
      //11.21添加高德地图
      // var GoogleNormal = L.tileLayer.chinaProvider('Google.Normal.Map', {
      //             maxZoom: 18,
      //             minZoom: 5
      //         }),
      //         Googleimgem = L.tileLayer.chinaProvider('Google.Satellite.Map', {
      //             maxZoom: 18,
      //             minZoom: 5
      //         }),
      //         Googleimga = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
      //             maxZoom: 18,
      //             minZoom: 5
      //         });
      //     var Googleimage = L.layerGroup([Googleimgem, Googleimga,wmsLayer]);
      //     var GoogleMap = L.layerGroup([GoogleNormal,wmsLayer]);

      //     /**
      //      * 高德地图
      //      */
      //     var GaodeNormal = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      //         maxZoom: 18,
      //         minZoom: 5
      //     });
      //     var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
      //         maxZoom: 18,
      //         minZoom: 5
      //     });
      //     var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
      //         maxZoom: 18,
      //         minZoom: 5
      //     });
      //     var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga,wmsLayer]);
      //     var GaodeMap = L.layerGroup([GaodeNormal,wmsLayer]);
      //     var baseLayers = {
      //         "高德地图": GaodeMap,
      //         "高德影像": Gaodimage,
      //         "谷歌地图": GoogleMap,
      //         "谷歌影像": Googleimage,
      //     }




      //设置地图范围
      this.map.setMaxBounds(this.option.coordinates);
      this.map.on("click",function(e){
        
    
      })
      this.map.on("mouseover",function(e){
      })


      document.onmousedown = e => {
        document.onmousemove = e => {
        that.the_state=1
      };
      document.onmouseup = e => {
        //鼠标弹起来的时候不再移动
        document.onmousemove = null;
        //预防鼠标放上去的时候还会移动
        document.onmouseup = null;
      };
      };
      this.map.on("mousedown",function(e){

      })
      this.map.on("dblclick",function(e){
  
      })
      this.map.on("mouseup",function(e){

      })
      this.map.on("contextmenu",function(e){
 
      })
      this.map.on("moveend",function(e){
        that.station_view_list=[]

    
        var zoom = that.map.getZoom(); //获取当前地图的缩放级别

        if(zoom >= 17){
          
          for(const key in that.stationjson){
          if(that.stationjson[key].center!=undefined){
 
          var poly1 = turf.polygon([[[that.map.getBounds()._northEast.lng,that.map.getBounds()._northEast.lat],[that.map.getBounds()._northEast.lng,that.map.getBounds()._southWest.lat],[that.map.getBounds()._southWest.lng,that.map.getBounds()._southWest.lat],[that.map.getBounds()._southWest.lng,that.map.getBounds()._northEast.lat],[that.map.getBounds()._northEast.lng,that.map.getBounds()._northEast.lat]]]);
          var poly2 = turf.polygon(that.stationjson[key].range.features[0].geometry.coordinates);

          turf.booleanOverlap(poly1, poly2)  
  
        
        if(turf.booleanOverlap(poly1, poly2)||turf.booleanContains(poly2, poly1)||turf.booleanContains(poly1, poly2))   //11.10修改覆盖占用逻辑
        {
        that.station_view_list.push(parseInt(key))

        if(that.station_sub_list.includes(parseInt(key)))
        {
       
        }
        else{
  
          that.sub_station(parseInt(key))
          that.station_sub_list.push(parseInt(parseInt(key)))
        }
          }

        }
        }
        }
      });  

      this.map.on("zoomend", this.onZoomEnd);
      this.layerGroup.linesLayerGroup = new L.FeatureGroup().addTo(this.map); // 线路图层组
      this.layerGroup.pointsLayerGroup = new L.FeatureGroup().addTo(this.map); // 站点图层组
      this.layerGroup.pointsLayerGroup_2 = new L.FeatureGroup().addTo(this.map); // 站点图层组      
      this.layerGroup.pointsLayerGroup_3 = new L.FeatureGroup().addTo(this.map); // 站点图层组    
      this.layerGroup.fontsLayerGroup = new L.FeatureGroup().addTo(this.map); // 文字描述图层组
      this.layerGroup.signalLayerGroup = new L.FeatureGroup().addTo(this.map); // 信号灯图层组
      this.layerGroup.linestextLayerGroup = new L.FeatureGroup().addTo(this.map); // 线路描述图层组
      this.layerGroup.insulatedLayerGroup = new L.FeatureGroup().addTo(
        this.map
      ); // 绝缘线图层组
      this.layerGroup.locomotiveLayerGroup = new L.FeatureGroup().addTo(
        this.map
      ); // 机车图层组
      this.layerGroup.geofencingLayerGroup = new L.FeatureGroup().addTo(
        this.map
      ); // 围栏图层组
      this.layerGroup.otherLayerGroup = new L.FeatureGroup().addTo(this.map); // 其他图层组
      this.layerGroup.measureLayersGroup = new L.FeatureGroup().addTo(this.map); // 测量图层组

      this.drawTools.measureDisTool =
        /*****************************************************围栏******************************************************************/
        this.drawTools.polyGeofencing = new L.Draw.Polygon(this.map); // 多边形围栏
      this.drawTools.rectGeofencing = new L.Draw.Rectangle(this.map); // 矩形围栏
      this.drawTools.circleGeofencing = new L.Draw.Circle(this.map); // 圆形围栏
      this.drawTools.markerGeofencing = new L.Draw.Marker(this.map); // 点
            this.layerGroup.persionLayerGroup = new L.FeatureGroup().addTo(this.map); // 人员图层组
      this.drawTools.geofencingEdit = new L.EditToolbar.Edit(this.map, {
        // 编辑围栏
        //绘制图层
        featureGroup: this.layerGroup.geofencingLayerGroup,
        //图形编辑控件
        edit: true,
        allowIntersection: false,
      });
      this.drawTools.geofencingDel = new L.EditToolbar.Delete(this.map, {
        // 删除围栏
        //绘制图层
        featureGroup: this.layerGroup.geofencingLayerGroup,
        //图形编辑控件
        edit: true,
        allowIntersection: false,
      });
      this.drawArr.push(
        this.drawTools.polyGeofencing,
        this.drawTools.rectGeofencing,
        this.drawTools.circleGeofencing,
        this.drawTools.markerGeofencing,
        this.drawTools.geofencingEdit,
        this.drawTools.geofencingDel
      );
      //  关闭围栏选项
      this.drawTools.geofencingOptions = {
        polygon: {
          obj: this.drawTools.polyGeofencing,
        },
        rectangle: {
          obj: this.drawTools.rectGeofencing,
        },
        circle: {
          obj: this.drawTools.circleGeofencing,
        },
        marker: {
          obj: this.drawTools.markerGeofencing,
        },
        edit: {
          obj: this.drawTools.geofencingEdit,
          editLayer: this.drawTools.editedGeoLayer,
        },
        delete: {
          obj: this.drawTools.geofencingDel,
          deleteLayer: this.layerGroup.geofencingLayerGroup,
        },
      };

      /*****************************************************测量******************************************************************/
      // 测距工具
      this.drawTools.measureDisTool = new L.Draw.Polyline(this.map, {
        // 允许折线相交
        allowIntersection: false,
        // 是否在工具提示中显示距离
        showLength: true,
        metric: ["km", "m"],
        nautic: true,
      });
      // 测面工具
      this.drawTools.measureAreaTool = new L.Draw.Polygon(this.map, {
        // 不允许多边形不相邻边相交
        allowIntersection: false,
        // 是否在工具提示中显示面积
        showArea: true,
        // ['km'，'m']的值意味着长度将以米为单位显示，当超过1000米时，以公里为单位，并且该区域将以m²或km²显示。
        metric: ["km", "m"],
        // 当不使用公制测量系统或脚时，使用nautic英里而不是码和英里
        nautic: true,
      });
      this.drawArr.push(
        this.drawTools.measureDisTool,
        this.drawTools.measureAreaTool
      );

      /************************************绘制事件处理：绘制/编辑(测量、围栏)********************************************/

      // 绘制开始：禁用掉地图双击缩放事件
      that.map.on(L.Draw.Event.DRAWSTART, function (event) {
        // 禁用掉地图双击缩放事件
        that.map.doubleClickZoom.disable();
        // 双击多边形绘制结束
        that.map.on("dblclick", function (e) {
          that.drawTools.measureAreaTool.enabled() &&
            that.drawTools.measureAreaTool.completeShape();
          that.drawTools.polyGeofencing.enabled() &&
            that.drawTools.polyGeofencing.completeShape();
        });
      });
      // 编辑-拖动：矩形、圆形
      that.map.on(L.Draw.Event.EDITMOVE, function (event) {
        if (that.drawTools.editedGeoLayer.indexOf(event.layer) === -1) {
          that.drawTools.editedGeoLayer.push(event.layer);
        }
      });
      // 编辑-缩放大小：矩形、圆形
      that.map.on(L.Draw.Event.EDITRESIZE, function (event) {
        if (that.drawTools.editedGeoLayer.indexOf(event.layer) === -1) {
          that.drawTools.editedGeoLayer.push(event.layer);
        }
      });
      // 编辑顶点：多边形
      that.map.on(L.Draw.Event.EDITVERTEX, function (event) {
        if (that.drawTools.editedGeoLayer.indexOf(event.poly) === -1) {
          that.drawTools.editedGeoLayer.push(event.poly);
        }
      });

      //绘制完成：解除地图双击缩放事件
      that.map.on(L.Draw.Event.CREATED, function (e) {
        // 图层类型
        var type = e.layerType;
        //获取绘制图层
        var drawlayer = e.layer;
        if (that.drawToolType === "measure") {
          // 测量
          var content = getPopupContent(drawlayer);
          if (content !== null) {
            drawlayer.bindPopup(content);
          }
          drawlayer.options.opacity = 1;
          drawlayer.options.weight = 2;
      

          // that.layerGroup.measureLayersGroup.addLayer(drawlayer);
          drawlayer.openPopup();
          that.closeMeasureTools(
            that.drawTools.measureDisTool,
            that.drawTools.measureAreaTool
          );
        } else if (that.drawToolType === "pointlng") {
          let lat;
          if (e.layerType == "circle") {
            lat = e.layer._latlng + "  半径：" + e.layer._mRadius;
          } else if (e.layerType == "marker") {
            lat = e.layer._latlng;
          } else {
            lat = e.layer._latlngs[0];
          }
          that.$alert(lat, "测量");
        } else if (that.drawToolType === "geofencing") {
          that.data_pointsfence=drawlayer._latlngs

          that.geoDialog = true;

          
        }
        // 注销多边形绘制双击事件
        that.map.off("dblclick");
        // 恢复地图双击事件
        that.map.doubleClickZoom.enable();
      });

      // 删除开始
      that.map.on(L.Draw.Event.DELETESTART, function (event) {});

      // 地图点击
      that.map.on("click", function (event) {;});
    },
    // 初始化绘制控件
    initDrawCtrl() {
      // let that = this;
      // L.easyButton(
      //   '<img style="bottom: 10px;position: fixed;right: 8px;"src=" '+
      //     require(`../../assets/images/map/huidaodangqian.png`) +
      //     " > ",
      //   function (btn, map) {
      //     that.the_state=0
      //   },
      //   "回到当前位置"
      // ).addTo(that.map);
      // L.easyButton(
      //   "<img src=" + require(`../../assets/images/map/Site.png`) + " >",
      //   function (btn, map) {
      //     that.linesDialog = true;
      //   },
      //   "站点线路"
      // ).addTo(that.map);
      // L.easyButton(
      //   "<img src=" + require(`../../assets/images/map/tongji.png`) + " >",
      //   function (btn, map) {},
      //   "统计"
      // ).addTo(that.map);
      //       L.easyButton(
      //   "<img src=" + require(`../../assets/images/map/duobianxing.png`) + " >",
      //   function (btn, map) {
      //     that.drawShape("Polygon", "1");
      //         console.log(that.drawShape)
      //   },
        
      //   "绘制多边形围栏"
      // ).addTo(that.map);
      // L.easyButton(
      //   "<img src=" +
      //     require(`../../assets/images/map/xingzhuang-juxing.png`) +
      //     " >",
      //   function (btn, map) {
      //     that.drawShape("Rectangle", "1");
      //   },
      //   "绘制矩形围栏"
      // ).addTo(that.map);
      // L.easyButton(
      //   "<img src=" +
      //     require(`../../assets/images/map/xingzhuang-tuoyuanxing.png`) +
      //     " >",
      //   function (btn, map) {
      //     that.drawShape("Circle", "1");
      //   },
      //   "绘制圆形围栏"
      // ).addTo(that.map);
      // L.easyButton(
      //   "<img src=" + require(`../../assets/images/map/bianji.png`) + " >",
      //   function (btn, map) {
      //     that.drawShape("edit", "1");
      //   },
      //   "编辑围栏"
      // ).addTo(that.map);
      // L.easyButton(
      //   "<img src=" + require(`../../assets/images/map/shanchu.png`) + " >",
      //   function (btn, map) {
      //     that.drawShape("delete", "1");
      //   },
      //   "删除围栏"
      // ).addTo(that.map);
    },
    clickit()
    {
      

    },
    //放大缩小事件处理
    onZoomEnd(e) {
      let that = this;
      let zoomlevel = that.map.getZoom();

      switch (zoomlevel) {
        case 21:
          this.setLineStyle("10");
          break;
        case 20:
          this.setLineStyle("4");
          break;
        case 19:
          this.setLineStyle("5");        
        case 18:
          this.setLineStyle("3");
          break;
        case 17:
          this.setLineStyle("3");
          break;
        case 16:
          this.setLineStyle("2");
          break;
        case 15:
          this.setLineStyle("1");
          break;
        case 14:
          this.setLineStyle("1");
          break;
        case 13:
          this.setLineStyle("1");
          break;
        case 12:
          this.setLineStyle("1");
          break;
        case 11:
          this.setLineStyle("1");
          break;  
        default:
          this.setLineStyle("5");
          break;
      }
      if (zoomlevel < 17){
        if (that.map.hasLayer(that.layerGroup.linestextLayerGroup)) {
          
        that.layerGroup.linestextLayerGroup.eachLayer(item => {
 
         item.setOpacity(0);
 
          });
          
        } else {
          that.map.addLayer(that.layerGroup.linestextLayerGroup);
          that.layerGroup.linestextLayerGroup.eachLayer(item => {
 
            item.setOpacity(0);
 
          });
        }


      }
      if(zoomlevel < 17){
        that.map.removeLayer(that.layerGroup.geofencingLayerGroup)
        if (that.map.hasLayer(that.layerGroup.pointsLayerGroup))
        {} 
        else that.map.addLayer(that.layerGroup.pointsLayerGroup)

        that.map.removeLayer(that.layerGroup.pointsLayerGroup_2)

      }
      else{
        that.map.addLayer(that.layerGroup.pointsLayerGroup_2)
 
      }
      if (zoomlevel < 17) {
        if (that.map.hasLayer(that.layerGroup.signalLayerGroup)) {
          
        that.layerGroup.signalLayerGroup.eachLayer(item => {
 
         item.setOpacity(0);
 
          });
        } else {
          that.map.addLayer(that.layerGroup.signalLayerGroup);
          that.layerGroup.signalLayerGroup.eachLayer(item => {
 
            item.setOpacity(0);
 
          });
        }



      }
      if (zoomlevel >= 17) {
        that.map.removeLayer(that.layerGroup.pointsLayerGroup)
        if (that.map.hasLayer(that.layerGroup.pointsLayerGroup_3)) {
          
        that.layerGroup.pointsLayerGroup_3.eachLayer(item => {
 
         item.setOpacity(0);
 
          });
        } else {
          that.map.addLayer(that.layerGroup.pointsLayerGroup_3);
          that.layerGroup.pointsLayerGroup_3.eachLayer(item => {
 
            item.setOpacity(0);
 
          });
        }



      }
      if (zoomlevel >= 17)
      {

        if (that.map.hasLayer(that.layerGroup.geofencingLayerGroup))
        {} 
        else that.map.addLayer(that.layerGroup.geofencingLayerGroup)
        if (that.map.hasLayer(that.layerGroup.linestextLayerGroup)) {
     
          that.layerGroup.linestextLayerGroup.eachLayer(item => {
 
            item.setOpacity(1);
 
          });
        } else {
          that.map.addLayer(that.layerGroup.linestextLayerGroup);
        }
      } 
      if (zoomlevel < 17)
      {

        if (that.map.hasLayer(that.layerGroup.pointsLayerGroup_3)) {
     
          that.layerGroup.pointsLayerGroup_3.eachLayer(item => {
 
            item.setOpacity(1);
 
          });
        } else {
          that.map.addLayer(that.layerGroup.pointsLayerGroup_3);
        }
      } 
      if (zoomlevel >= 17) {
        if (that.map.hasLayer(that.layerGroup.signalLayerGroup)) {
       
          that.layerGroup.signalLayerGroup.eachLayer(item => {
 
            item.setOpacity(1);
 
          });
        } else {
          that.map.addLayer(that.layerGroup.signalLayerGroup);
        }
      }

      if (zoomlevel >= 17) {
        let Layers = this.layerGroup.linesLayerGroup.getLayers();
        Layers[0].getLayers().map(function (item) {
          if (item.myTag && item.myTag == 1371699) {
            item.setStyle({ color: "red" });
          }
        });
        let Layerss = this.layerGroup.signalLayerGroup.getLayers();
        Layerss.map(function (item) {

        });
      }

      if (zoomlevel >= 17) {
        if (that.map.hasLayer(that.layerGroup.locomotiveLayerGroup)) {
         
        } else {
          that.map.addLayer(that.layerGroup.locomotiveLayerGroup);
        }

        if (that.map.hasLayer(that.layerGroup.persionLayerGroup)) {
          
        } else {
          that.map.addLayer(that.layerGroup.persionLayerGroup);
        }
      }
      if (zoomlevel < 17) {
        if (that.map.hasLayer(that.layerGroup.locomotiveLayerGroup)) {
          that.map.removeLayer(that.layerGroup.locomotiveLayerGroup);
          
          } else {
          }

          if (that.map.hasLayer(that.layerGroup.persionLayerGroup)) {
            that.map.removeLayer(that.layerGroup.persionLayerGroup);
          
          } else {

          }
      }
    },
    //设置线样式
    setLineStyle(weight) {
       this.layerGroup.linesLayerGroup.setStyle({ weight: weight });
    },
    //初始化线路
    initLines() {


      var latlngs = [ //线中点的经纬度点
                [ 113.3203597222222, 33.74838222222222 ],
               [ 113.3207377777778, 33.74830944444445 ],
               [ 113.3209461111111, 33.7482750 ],
               [ 113.3211688888889, 33.74824138888889 ],
               [ 113.3219211111111, 33.74815083333333 ],
               [ 113.3221422222222, 33.74812416666666 ],
               [ 111.325266262, 31.74809750 ]
]


   

  //var circle =L.circleMarker([113.3203597222222,33.74838222222222],{radius:10000}).addTo(this.map);

//       var latlngs = [ //线中点的经纬度点
//                 [ 113.3203597222222, 33.74838222222222 ],
//                [ 113.3207377777778, 33.74830944444445 ],
//                [ 113.3209461111111, 33.7482750 ],
//                [ 113.3211688888889, 33.74824138888889 ],
//                [ 113.3219211111111, 33.74815083333333 ],
//                [ 113.3221422222222, 33.74812416666666 ],
//                [ 113.32236750, 33.74809750 ]
// ]
// var line = L.polyline(latlngs, {
//     color: 'red',//线的颜色
//     weight: 3 //线的粗细
// }).addTo(this.layerGroup.linesLayerGroup)
      let that = this;
      // console.log(that.linesdata.features[0].geometry.type)
      // var latlngs = [[113.3374238888889,33.74377416666667],[113.343705,33.74871055555555],[113.3145594444444,33.75457805555556],[113.3115227777778,33.75151777777778],[113.3138119444444,33.74893805555556],[113.3191377777778,33.74746833333333],[113.3321108333333,33.74446083333334],[113.3374238888889,33.74377416666667]]
      // console.log(that.layerGroup.linesLayerGroup)
      // console.log(L.polyline(latlngs, { style: that.biglinesStyle}).addTo(that.layerGroup.linesLayerGroup))    
      var _linesdata=new Array()      
      for(const key in that.linesdata)
      {

        _linesdata.push(that.linesdata[key])
      }
      var linesLayer = L.geoJson(_linesdata, {
       filter:function(feature){
            switch (feature.geometry.type) {
                case 'LineString': return true;
                case 'Point': return false;
            }
        },
        // id:feature.properties.name,
        style: function (feature) {
        return {
                weight:'1',
                color:'grey',
                fillcolor:'grey'
        };
        },
        onEachFeature:that.onEachFeature

      }).addTo(that.layerGroup.linesLayerGroup)
      

linesLayer.eachLayer(item=>{//遍历城市
        let that=this
        
      let iconSize = [2 * 16 + 16, 16];
      let iconAnchor = [];
      let rotationAngle = 0;
      let rotationOrigin = "";
          var myicon = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div style="pointer-events: none;cursor: default;width:20' +
            'px;height:16px;">' +
            '<div class="my-div-span" style="pointer-events: none;cursor: default;color:white;height:5px;line-height:5px">' +
            item.name +
            "</div></div>",
        });

                  var myicon_2 = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div style="pointer-events: none;cursor: default;width:50' +
            'px;height:16px;">' +
            '<div class="my-div-span" style="pointer-events: none;cursor: default;color:white;height:5px;line-height:5px">' +
            item.trackName +
            "</div></div>",
        });
        if(item.part=='previous')
        var marker=L.marker(
          [item._latlngs[0].lat,item._latlngs[0].lng],
          {
            icon: myicon_2,
          }
        )
          .addTo(that.layerGroup.linestextLayerGroup)
          .on("click", function (e) {;});
        else if(item.part!='previous'&&item.part!='normal'&&item.part!='reverse')
        marker=L.marker(
          item.getCenter(),
          {
            icon: myicon,
          }
        )
          .addTo(that.layerGroup.linestextLayerGroup)
          .on("click", function (e) {;});
      })
      

      // that.map.fitBounds(linesLayer.getBounds());
      // fetch("./tt.json").then((response) => {
      //   response
      //     .json()
      //     .then((data) => {
      //       let lineLayer = L.geoJson(data, {
      //         style: that.biglinesStyle,
      //         onEachFeature: that.onEachFeature,
      //       }).addTo(that.layerGroup.linesLayerGroup);
      //       that.map.fitBounds(lineLayer.getBounds());

      //       let feaArray = [];
      //       for (const fea of data.features) {
      //         if (fea.properties.startLabel == "N9") {
      //           console.log("ok");
      //         }
      //         // multiLine
      //         let coords = fea.geometry.coordinates[0];
      //         let ls1 = that.getVerticalLine(coords[0], coords[1], 1, true);
      //         let ls2 = that.getVerticalLine(
      //           coords[coords.length - 2],
      //           coords[coords.length - 1],
      //           1,
      //           false
      //         );
      //         feaArray.push(ls1.line, ls2.line);

      //         that.produceLight(
      //           that.layerGroup.signalLayerGroup,
      //           fea.properties.startArray,
      //           ls1,
      //           fea.properties.startLocation,
      //           fea.properties.startLabel
      //         );
      //         that.produceLight(
      //           that.layerGroup.signalLayerGroup,
      //           fea.properties.endArray,
      //           ls2,
      //           fea.properties.endLocation,
      //           fea.properties.endLabel
      //         );
      //       }
      //       let fc = featureCollection(feaArray);
      //       L.geoJson(fc, {
      //         style: that.sizelinesStyle,
      //         onEachFeature: that.onEachFeature,
      //       }).addTo(that.layerGroup.insulatedLayerGroup);
      //     })
      //     .catch(function (error) {
      //       console.log("Request failed", error);
      //     });
      // });
    },

    // updateview(position1, position0,angel)
    // {
    //   let that=this
    //   if (this.map.getZoom() <17 )
    //   {
    //           that.map.setView([position1,position0], 17);
    //           var center_angle=272-(angel)
    //           this.map.setBearing(center_angle);
    //           let Layers = this.layerGroup.locomotiveLayerGroup.getLayers();
   
    //                 Layers.map(function (layer){
  
    //                   var train_angle=layer.rotate+center_angle/57.4
    //                   layer.setRotation(train_angle);
    //                 })
    //   }
    // },
    //初始化站点
    initPoints() {
      let that = this;
      // var myIcon = L.divIcon({
      //   html: "申西站",
      //   className: "my-div-icon",
      //   iconSize: 120,
      // });
      // L.marker([33.749176, 113.331276], { icon: myIcon }).addTo(
      //   that.layerGroup.pointsLayerGroup
      // );
      // var newa = that.linesdata.features.filter(function(feature){
      //         switch (feature.geometry.type) {
      //           case 'LineString': return false;
      //           case 'Point': return true;
      //       }
      // });
    
        let imghtml = '<img class="my-div-image" style="pointer-events: none;cursor: default;" src="./yellow.png"/>';


        for(const key in that.stationjson){
   
        const a=that.stationjson[key]
        const stationjson=a
        if(stationjson['center']!=undefined){
        let myicon = new L.DivIcon({
          className: "my-div-iconl",
      
          html:
     
            '<div style="z-index:99199;width:15' +
            'px;height:10px;">' +
            imghtml +
            '<div class="my-div-span"  style="z-index:99199;color:white;height:100px;width:80px;line-height:15px; font-size: 20px;">'+
            stationjson.name +
            "</div></div>"
        });


        let myicon_2 = new L.DivIcon({
          className: "my-div-iconl",

          html:
            '<div style="z-index:99199;width:120' +
            'px;height:10px;">' +
            '<div class="my-div-span" onClick="clickit()" style="pointer-events: none;cursor: default;z-index:99199;color:white;height:160px;line-height:160px; font-size: 35px;">' +
            stationjson.name +
            "</div></div>",
        });
        const pointmarker = L.marker(
          [stationjson.center[1], stationjson.center[0]],
          {
            icon: myicon
          }
        )
          .addTo(that.layerGroup.pointsLayerGroup)

          .on("mouseover",function (e) {
            if (that.map.getZoom() < 17) 
            pointmarker.bindTooltip("点击放大").openTooltip()
          })
          .on("mousedown", function (e) {
     
         
            // e.target.closePopup();

            if (that.map.getZoom() > 17) {
              //e.target.bindPopup("<button type='button' onclick = 'addToCart(123)'>详情</button>") .openPopup();
       
            } else {
              

              that.map.setView(e.latlng, 17);
              var center_angle=270-(stationjson.center_angle)
              that.map.setBearing(center_angle);
              let Layers = that.layerGroup.locomotiveLayerGroup.getLayers();
   
                    Layers.map(function (layer){
  
                      var train_angle=layer.rotate+center_angle/57.4
                      layer.setRotation(train_angle);
                    })
			        // that.map.touchRotate.enable();
            }
          });
        if(stationjson.label_position)
        {
        const pointmarker_2 = L.marker(
          [stationjson.label_position[1], stationjson.label_position[0]],
          {
            icon: myicon_2,
          }
        )
          .addTo(that.layerGroup.pointsLayerGroup_2)
        }
        pointmarker.attrdata = stationjson;
        }
        }
        //that.map.fitBounds(pointLayer.getBounds());
    },
    //初始化信号灯
    initLight() {
      let that = this;
      let imghtml = '<img class="my-div-image_2" style="transform:translateX(-15px)translateY(-30px)" src="./worker_green.svg"/>';
          var myicon = new L.DivIcon({
          className: "my-div-iconl_2",
          html:
            '<div style="width:60' +
            'px;height:16px;z-index:9956">' +
            imghtml +
            '<div class="my-div-span" style="color:white;height:5px;line-height:5px">' +
            "</div></div>",
        });
//         var marker1=L.marker(
//           [33.74768,113.3262],
//           {
//             icon: myicon,
//           }
//         )
//           .addTo(that.layerGroup.persionLayerGroup)
//           Object.defineProperties(marker1, {
//     id: {
//         value: 6000
//     }
// });

      var myicon ;
 
      for(const key in that.linesdata){
      var newa = that.linesdata[key].features.filter(function(feature){
              switch (feature.geometry.type) {
                case 'LineString': return false;
                case 'Point': return true;
            }
      });
      newa.map((item) => {
       let iconSize = [16 + 16, 16];
        let iconAnchor = [0, 0];
        let imghtml = <circle id="item" r="4" stroke-width="2" stroke="#404040" fill="#404040"/>
        if(item.properties.name=='insulating-joint')
        var name=''
        else {name=item.properties.name 

        
        if(item.properties.lightNum==2){
        var myicon = new L.DivIcon({
          className: "my-div-iconl",
          // iconSize: iconSize,
          html:
            '<div id="'+
            'S'+item.properties.stationId+'_'+name+
            '" type="signal2'+             
            '" style="pointer-events: none;cursor: default;width:60px;height:10px;" class="ANone BNone">' +
            '<div id="SignalA"'+         
            ' style="pointer-events: none;cursor: default;border-radius: 50% ;width: 10px ;display: inline-block;height: 10px"></div>'+
            '<div id="SignalB"'+          
            ' style="pointer-events: none;cursor: default;border-radius: 50% ;width: 10px ;display: inline-block;height: 10px"></div>'+
            '<div class="my-div-div" style="pointer-events: none;cursor: default;color:white;height:16px;line-height:16px;text-align: center;">' +
            name +
            "</div>      </div>",
        });
        
   
        
        }
        else {
          myicon = new L.DivIcon({
          className: "my-div-iconl",
        
          html:
            '<div id="'+
            'S'+item.properties.stationId+'_'+name+             
            '" style="pointer-events: none;cursor: default;width:60px;height:10px;" class="ANone BNone">' +
            '<div id="SignalA"'+            
            ' style="pointer-events: none;cursor: default;border-radius: 50% ;width: 10px ;display: inline-block;height: 10px"></div>'+
            '<div class="my-div-div" style="pointer-events: none;cursor: default;color:white;height:16px;line-height:16px;text-align: center;">' +
            name +
            "</div>      </div>",
        });
        }
        const pointmarker = L.marker(
          [item.geometry.coordinates[1], item.geometry.coordinates[0]],
          {
            interactive:false,
            icon: myicon,
          }
        )
          .addTo(that.layerGroup.signalLayerGroup)
          .on("click", function (e) {;});
       
        }
      }) 

    }
    

      // that.renderOneStationDevices(that.test_data)
      // that.renderSingleDevice(that.new_test_data)
      // that.renderTrainDevice(that.train_data_2)
      // that.renderTrainDevice(that.train_data_3)  
      // setTimeout(() => {
      //   that.renderTrainDevice(that.train_data_5)
      // }, 10000); 
      // that.renderTrainDevice(that.train_data_5)        
      // that.renderPeopleDevice(that.person_data_1) 


              
   
      
  
      // that.renderPeopleDevice(that.person_data_2)          
               
      // d3.select('#S12_S10').append('color','yellow')








//       console.log('^^^^^^^^^^^^^^^^^^^^')
//                console.log(that.layerGroup.signalLayerGroup)
//       console.log(that.linesdata.features[0].geometry.type)




//     var geojsonMarkerOptions = {

// radius: 0.56,

// fillColor: "#ff7800",

// color: "#000",

// weight: 1,

// opacity: 1,

// fillOpacity: 0.8

// };


//   that.linesdata.features.map((item) => {
//        let iconSize = [16 + 16, 16];
//         let iconAnchor = [0, 0];

//         myicon = new L.DivIcon({
//           className: "my-div-iconl",
//           iconSize: iconSize,
//           iconAnchor: iconAnchor,
//           html:
//             '<div style="width:60' +
//             'px;height:16px;">' +
//             '<span class="my-div-span" style="color:white;height:16px;line-height:16px">' +
//             item.properties.name +
//             "</span></div>",
//         });
//   })




// L.geoJSON(that.linesdata, {



// pointToLayer: function (feature, latlng){

// return L.circle(latlng, geojsonMarkerOptions);

// },
// alt: '123'

// }).addTo(that.layerGroup.signalLayerGroup);





      // let signalLayer = L.circle(that.linesdata, {
      //   filter:function(feature,latlng){
      //       switch (feature.geometry.type) {
      //           case 'LineString': return false;
      //           case 'Point': return true;
      //       }
      //   },
      //   pointToLayer: function (feature, latlng){

      //     return L.circleMarker(latlng, geojsonMarkerOptions);

      //   },
      //    onEachFeature : that.onEachFeature
      //   // style: that.biglinesStyle
      // }).addTo(that.layerGroup.signalLayerGroup)
      // this.layerGroup.linesLayerGroup.addLayer(L.circle([113.3203597222222,33.74838222222222],{radius:10})) 
      // that.map.fitBounds(linesLayer.getBounds());
    },
      rendeStationTask(data){    //获取车站任务关联信息
        
        let that=this
        for(var i in data)
        {
     
          if(this.station_task[data[i].fenceStations[0]]==undefined) 
          {
            this.station_task[data[i].fenceStations[0]]=[]
          }      
          this.station_task[data[i].fenceStations[0]].push(data[i].taskId)
          if(this.task_fence[data[i].taskId]==undefined) 
          {
            this.task_fence[data[i].taskId]={}
          } 
          
       
        
          this.rendeTaskFence(data[i].taskId)
          
          this.task_fence[data[i].taskId].type=data[i].type
          this.task_fence[data[i].taskId].state=data[i].state
          this.task_fence[data[i].taskId].begintime=data[i].beginTime_plan
          this.task_fence[data[i].taskId].endtime=data[i].endTime_plan          
        }


      },        
      rendeTaskFence(data){     //获取任务围栏关联信息
        let that=this
        
        
        getTaskFence(data).then((response)=>{
          {

            that.task_fence[data]={
                fenceid:'',
                begintime:'',
                endtime:'',
                type:'',
                state:''

              }
            that.task_fence[data].fenceid=response.data.fenceIds[0]
            that.task_fence[data].begintime=response.data.beginTime_plan
          that.task_fence[data].endtime=response.data.endTime_plan  
          that.task_fence[data].type=response.data.type  
          that.task_fence[data].state=response.data.state  
      var taskid=data
      var state=response.data.state
 
      if(response.data.fenceStations[0]!=undefined)
      var stationid=response.data.fenceStations[0]   
          
  

          {
            for(var i=0;i<that.station_sub_list.length;i++)
            if(that.station_sub_list[i]==stationid)
            {
          if(state==5)
          {

          //for(var k=0; k<that.task_fence[taskid].fenceid.length;k++)
          {
            var the_taskid=taskid
     
            //that.initFence(that.task_fence[taskid].fenceid[0],2,the_taskid) //0212
            if(that.fence_showns.includes(that.task_fence[taskid].fenceid))
            {
              that.deletefence(that.task_fence[taskid].fenceid)
              that.initFence(that.task_fence[taskid].fenceid,2,the_taskid)
            }
          else {that.initFence(that.task_fence[taskid].fenceid,2,the_taskid)
            that.fence_showns.push(that.task_fence[taskid].fenceid)
          }
          }
             
          }
        //   if(state!=5)
        //   {
        //     debugger
        //     for(var i=0;i<this.task_fence[taskid].fenceid.length;i++)
        //     {
        //       if(this.fence_showns.includes(this.task_fence[taskid].fenceid[i]))
        //       {
        //         this.deletefence(this.task_fence[taskid].fenceid[i])
        //         for(var j;j<this.task_fence[taskid].fenceid.length;j++)
        //         {
        //           if(this.task_fence[taskid].fenceid[j]==this.task_fence[taskid].fenceid[i])    
        //           {
        //             this.task_fence[taskid].fenceid.splice(this.task_fence[taskid].fenceid.indexOf(this.task_fence[taskid].fenceid[i]),1)
                      
        //         } 
        //       }
        //     }
        //   }     
        // }
      }
      }
        
      }  }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
      },

      renderPeopleDevice(data){
        if(this.person_list.includes(data.deviceId))
        {
          this.updatePeoplePosition(data.deviceId,data.lat,data.lon)
        }
        else{
          this.createPeoplePosition(data.deviceId,data.lat,data.lon)
          this.person_list.push(data.deviceId)
        }
      },




      updatePeoplePosition(deviceId,lat,lon)
      {
        if(this.person_data[deviceId]==undefined)
      this.person_data[deviceId]={}
      let that=this
      var _lat=lat/3600000
      var _lon=lon/3600000

      var imghtml

        if(that.person_data[deviceId].color=='red')
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(-15px)translateY(-30px)" src="./worker_red.svg"/>';
       
        }     
        else if(that.person_data[deviceId].color=='orange')
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(-15px)translateY(-30px)" src="./worker_orange.svg"/>';

        }  
        else if(that.person_data[deviceId].color=='yellow')
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(-15px)translateY(-30px)" src="./worker_yellow.svg"/>';
     
        }
        else 
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(-15px)translateY(-30px)" src="./worker_green.svg"/>';
   
        }
        var myicon = new L.DivIcon({
          className: "my-div-iconl_2",
          html:
            '<div style="width:60' +
            'px;height:16px;z-index:9956">' +
            imghtml +
            '<div class="my-div-span2" style="text-align:center;transform:translateX(-75px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+this.personNumberlist[deviceId].deviceName+
            "</span></div></div>",
        });
      let Layers = this.layerGroup.persionLayerGroup.getLayers();
      Layers.map(function (layer){
        if(layer.id==deviceId)
        {
          layer.setLatLng([_lat,_lon]);
          layer.setIcon(myicon)

        }
      })
              if(this.person_lists[1]>0&&this.person_lists[1]==deviceId)
        {this.selectChanged_person(deviceId)}
      },
      

      createPeoplePosition(deviceId,lat,lon)
      {

      if(this.person_data[deviceId]==undefined)
      this.person_data[deviceId]={}
      let that=this
      var _lat=(lat/3600000)
      var _lon=lon/3600000

      let iconSize = [2 * 16 + 16, 16];
      let iconAnchor = [];
      let rotationAngle = 0;
      let rotationOrigin = "";
        let imghtml = '<img class="my-div-image_2" style="transform:translateX(-15px)translateY(-30px)" src="./worker_green.svg"/>';
          var myicon = new L.DivIcon({
          className: "my-div-iconl_2",
          html:
            '<div style="width:60' +
            'px;height:16px;z-index:9956">' +
            imghtml +
            '<div class="my-div-span2" style="text-align:center;transform:translateX(-75px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+this.personNumberlist[deviceId].deviceName+
            "</span></div></div>",
        });
        var marker=L.marker(
          [_lat,_lon],
          {
            icon: myicon,
          }
        )
          .addTo(that.layerGroup.persionLayerGroup)
          .on("click", function (e) {
  
            e.target.bindPopup("<div style='width:120px'><b>正在查询中……</b></div>",{autoPan:false})
          })
 
         


    

                  
Object.defineProperties(marker, {
    id: {
        value: deviceId
    }
});

      },

      updatePersonRT(data)
      {

        let that=this
        if(this.person_data[data.deviceId]==undefined)
        {this.person_data[data.deviceId]={}
        this.person_data[data.deviceId].TrackIndex=0
        }
        if(data.onTrackIndexs.length==0)
        this.person_data[data.deviceId].TrackIndex=0
        else this.person_data[data.deviceId].TrackIndex=''
        for(var i=0;i<data.onTrackIndexs.length;i++)
          {
            var track_type=''
            if(data.coverRoute[data.onTrackIndexs[i]].dType=='switch')
            data.coverRoute[data.onTrackIndexs[i]].part=='previous'?track_type='道岔岔前':data.coverRoute[data.onTrackIndexs[i]].part=='normal'?track_type='道岔定位':track_type='道岔反位'
            if(this.person_data[data.deviceId].TrackIndex)
            this.person_data[data.deviceId].TrackIndex+=('|'+data.coverRoute[data.onTrackIndexs[i]].dname+track_type)
            else this.person_data[data.deviceId].TrackIndex+=(data.coverRoute[data.onTrackIndexs[i]].dname+track_type)
          }

        let Layers = this.layerGroup.persionLayerGroup.getLayers();
  
        Layers.map(function (layer){
        if(layer.id==data.deviceId)
        
        {
          Object.defineProperties(layer, {
          stationNo: {
            value: data.stationNo,
            writable:true
            }
          });

        }
        })

      },
      updatePersonPopup(data)
      {
        
        let that=this

      var up_no=-1
      var down_no=-1
      var unknow_no=-1
      var status=2          //(0为围栏内||1为围栏外||2无关联围栏||3未知)
      var fencestatus={
          '0':'围栏内',
          '1':'围栏外',
          '2':'无关联围栏',
          '3':'未知'
        }
      var level=4
      var up_level=4
      var down_level=4
      var unknow_level=4
      var up_distance=99999999
      var down_distance=99999999
      var unknow_distance=99999999
      if(data.deviceId==this.personNumberlist[data.deviceId].deviceName)
      var userdeviceinfo=data.deviceId
      else var userdeviceinfo=this.personNumberlist[data.deviceId].deviceName+'('+data.deviceId+')'
      if(this.personNumberlist[data.deviceId].userAccount)
      userdeviceinfo=userdeviceinfo+'/'+this.personNumberlist[data.deviceId].userAccount
      for(const i in data.fences)
      {
        if(data.fences[i].fenceRelation==1&&status!=0)
        status=1
        if(data.fences[i].fenceRelation==3&&status==2)
        status=3
        if(data.fences[i].fenceRelation==0)
        status=0
      }
      for(const i in data.preWarns)
      {
        if(data.preWarns[i].fromDir==0)
        {
          if(data.preWarns[i].areaNo<unknow_level)
          {
            unknow_no=i
            unknow_level=data.preWarns[i].areaNo
            unknow_distance=data.preWarns[i].distance
            if(unknow_level<level)
            level=unknow_level
          }   
          else if(data.preWarns[i].areaNo==unknow_level)
          {
            if(data.preWarns[i].distance<unknow_distance)
            {
              unknow_no=i
              unknow_level=data.preWarns[i].areaNo
              unknow_distance=data.preWarns[i].distance
            }
          }
        }
        else if(data.preWarns[i].fromDir==1)
        {
          if(data.preWarns[i].areaNo<up_level)
          {
            up_no=i
            up_level=data.preWarns[i].areaNo
            up_distance=data.preWarns[i].distance
            if(up_level<level)
            level=up_level
          }   
          else if(data.preWarns[i].areaNo==up_level)
          {
            if(data.preWarns[i].distance<up_distance)
            {
              up_no=i
              up_level=data.preWarns[i].areaNo
              up_distance=data.preWarns[i].distance
            }
          }
        }
        else if(data.preWarns[i].fromDir==2)
        {
          if(data.preWarns[i].areaNo<down_level)
          {
            down_no=i
            down_level=data.preWarns[i].areaNo
            down_distance=data.preWarns[i].distance
            if(down_level<level)
            level=down_level
          }   
          else if(data.preWarns[i].areaNo==down_level)
          {
            if(data.preWarns[i].distance<down_distance)
            {
              down_no=i
              down_level=data.preWarns[i].areaNo
              down_distance=data.preWarns[i].distance
            }
          }
        }
      }

      if(unknow_no==-1)
      {
        var unknow_no_trainNo=''
        var unknow_no_speed=''
        var unknow_no_distance='无'
        var unknow_no_time=''
        var unknow_no_level=''
      }
      else {
        unknow_no_trainNo=data.preWarns[unknow_no].trainNo
        unknow_no_speed=data.preWarns[unknow_no].speed*3.6/100
        unknow_no_speed=Math.round(unknow_no_speed)+"km/h"
        unknow_no_distance=unknow_distance+"米"
        unknow_no_time=data.preWarns[unknow_no].time
        if(unknow_no_time>59&&unknow_no_time!=65535)
        {
          unknow_no_time=((unknow_no_time-unknow_no_time%60)/60)+"分"+(unknow_no_time%60)+"秒"
        }
        else  unknow_no_time=(unknow_no_time)+"秒"
        unknow_no_level=(unknow_level+1)+"级"
      }
      if(up_no==-1)
      {
        var up_no_trainNo=''
        var up_no_speed=''
        var up_no_distance='无'
        var up_no_time=''
        var up_no_level=''
      }
      else {
        up_no_trainNo=data.preWarns[up_no].trainNo
        up_no_speed=data.preWarns[up_no].speed*3.6/100
        up_no_speed=Math.round(up_no_speed)+"km/h"
        up_no_distance=up_distance+"米"
        up_no_time=data.preWarns[up_no].time
        if(up_no_time>59&&up_no_time!=65535)
        {
          up_no_time=((up_no_time-up_no_time%60)/60)+"分"+(up_no_time%60)+"秒"
        }
        else  up_no_time=Math.round(up_no_time)+"秒"
        up_no_level=(up_level+1)+"级"
      }
      if(down_no==-1)
      {
        var down_no_trainNo=''
        var down_no_speed=''
        var down_no_distance='无'
        var down_no_time=''
        var down_no_level=''
      }
      else {
        down_no_trainNo=data.preWarns[down_no].trainNo
        down_no_speed=data.preWarns[down_no].speed*3.6/100
        down_no_speed=Math.round(down_no_speed)+"km/h"
        down_no_distance=down_distance+"米"
        down_no_time=data.preWarns[down_no].time
        if(down_no_time>59&&down_no_time!=65535)
        {
          down_no_time=((down_no_time-down_no_time%60)/60)+"分"+(down_no_time%60)+"秒"
        }
        else  down_no_time=(down_no_time)+"秒"
        down_no_level=(down_level+1)+"级"
      }
      if(down_no_time=='65535秒')
      down_no_time='未知'
      if(up_no_time=='65535秒')
      up_no_time='未知'
      if(unknow_no_time=='65535秒')
      unknow_no_time='未知'
      var trackindexinfo=(this.person_data[data.deviceId].TrackIndex==0)?'否':'是('+this.person_data[data.deviceId].TrackIndex+')'
      var locinfo=(data.locMode==0)?'无法定位':'卫星定位'
      var statusinfo=fencestatus[status]
      let Layers=this.layerGroup.persionLayerGroup.getLayers()
      Layers.map(function (layer){
        if(layer.id==data.deviceId)

    
        
        {
          layer.bindPopup("<div style='width:301px; bottom: 11px; left: -47px;'><b>设备信息</b><b style='float:right;color: #a19191;'>"+userdeviceinfo+"</b><br><b>是否在道上</b><b style='float:right;color: #a19191;'>"+trackindexinfo+"</b><br><b>是否在围栏内</b>"
                  +"<b style='float:right;color: #a19191;'>"+statusinfo+"</b><br><b>卫星定位状态</b><b style='float:right;color: #a19191;'>"+locinfo+"</b><br><br>"
                  +"<b style='color: red;'>------------------------------预警消息---------------------------</b><br>"
                  +"<table>"
                  +"<tr><td style='width:70px'>非监控列车</td><td style='width:40px'>"+unknow_no_trainNo+"</td><td style='width:30px'>"+unknow_no_level+"</td><td style='width:45px'>"+unknow_no_distance+"</td><td style='width:45px'>"+unknow_no_speed+"</td><td style='float:right;'>"+unknow_no_time+"</td></tr>"
       	          +"<tr><td style='width:70px'>上行列车</td><td style='width:40px'>"+up_no_trainNo+"</td><td style='width:30px'>"+up_no_level+"</td><td style='width:45px'>"+up_no_distance+"</td><td style='width:45px'>"+up_no_speed+"</td><td style='float:right;'>"+up_no_time+"</td></tr>"
       	          +"<tr><td style='width:70px'>下行列车</td><td style='width:40px'>"+down_no_trainNo+"</td><td style='width:30px'>"+down_no_level+"</td><td style='width:45px'>"+down_no_distance+"</td><td style='width:45px'>"+down_no_speed+"</td><td style='float:right;'>"+down_no_time+"</td></tr>")

        }
      }
      )
      if(level==0)
      this.person_data[data.deviceId].color='red'
      else if(level==1)
      this.person_data[data.deviceId].color='orange'
      else if(level==2)
      this.person_data[data.deviceId].color='yellow'
      else 
      this.person_data[data.deviceId].color='green'
      if(status==1)
      this.person_data[data.deviceId].color='red'
      },


 renderTrainDevice(data){
        let that=this
        var coverRoute_list=new Array()
        for(const c in data.coverRoute)
        {
          coverRoute_list[c] = 'S' + data.coverRoute[c].stationNo + '_' + data.coverRoute[c].dname
        }
        let Layers = this.layerGroup.locomotiveLayerGroup.getLayers();
        var existState=0
        Layers.map(function (layer){
        if(layer.id==data.deviceId)
        
        {
          existState=1
          if(data.coverRoute.length==0)
          {
            that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
            that.train_list.splice(that.train_list.indexOf(layer.id),1)
            var train_name='TrainRTInfo:'+layer.id+"_1"
              var trainwarn_name='TrainPreWarnInfo:'+layer.id+'_1'
              // that.$bus.$emit('Unsubscribe', that.require)
              if(that.train_lists[1]!=layer.id)
              {
                that.sockets.unsubscribe(train_name)
                that.sockets.unsubscribe(trainwarn_name)
                for(var i=0;i<that.require.channels.length;i++)
                {
                if(that.require.channels[i]==train_name)  
                that.require.channels.splice(that.require.channels.indexOf(train_name),1) 
                if(that.require.channels[i]==trainwarn_name)
                that.require.channels.splice(that.require.channels.indexOf(trainwarn_name),1) 
                }
              } 

            return
          }
          else {
            that.updateTrainPosition(coverRoute_list[data.end1.index], coverRoute_list[data.end2.index], data.deviceId, data ,  data.coverRoute[data.end1.index].part)
          }
          
        }
        
        })
        
        if(existState==0)
        {
          if(data.coverRoute.length)
          {
          this.createTrainPosition(coverRoute_list[data.end1.index], coverRoute_list[data.end2.index], data.deviceId, data ,  data.coverRoute[data.end1.index].part)
          this.train_list.push(data.deviceId)
          }
        }
        
      },




      updateTrainPopup(data)
      {
        let that=this
        if(this.train_data[data.deviceId]==undefined)
        this.train_data[data.deviceId]={}
        this.train_data[data.deviceId].upDownDir=data.upDownDir
        var warn_list={
          '0':'未绑定设备列车',
          '1':'已绑定设备列车',
          '2':'人员手持终端',
          '3':'人员定位终端',
          '4':'开放围栏入口',
          '5':'开放围栏出口',
          '6':'封闭围栏入口',
          '7':'封闭围栏出口',
          '8':'道口'
        }
        var locMode_list={
          '0':'无法定位',
          '1':'纯卫星定位',
          '2':'纯码位定位',
          '3':'基于外部系统定位',
          '4':'混合定位',
        }
        var updown_list={
          '0':'未知',
          '1':'上行',
          '2':'下行',
          '3':'无方向',
        }
        var target
        var no=-1
        var distance=9999999
        var level=3
        var the_locMode=locMode_list[data.locMode]
        var the_speed=Math.round(this.train_data[data.deviceId].speed)
        var the_updowndir=updown_list[data.upDownDir]
        for(const i in data.preWarns)
        {
          if(data.preWarns[i].areaNo<level)
          {
            no=i
            level=data.preWarns[i].areaNo
            distance=data.preWarns[i].distance
          }   
          else if(data.preWarns[i].areaNo==level)
          {
            if(data.preWarns[i].distance<distance)
            {
              no=i
              level=data.preWarns[i].areaNo
              distance=data.preWarns[i].distance
            }
          }
        }
        level=level+1
        if(level==4)
        this.train_data[data.deviceId].color='green'
        else if(level==3)
        this.train_data[data.deviceId].color='yellow'
        else if(level==2)
        this.train_data[data.deviceId].color='orange'
        else if(level==1)
        this.train_data[data.deviceId].color='red'              
        if(no!=-1)
        {
        target=warn_list[data.preWarns[no].targetType]
      let Layers = this.layerGroup.locomotiveLayerGroup.getLayers();
      Layers.map(function (layer){
        if(layer.id==data.deviceId)
        {
          layer.bindPopup("<div style='width:301px; bottom: 11px; left: -47px;'><b>机车号</b><b style='float:right;color: #a19191;'>"+that.trainNolist[data.deviceId]+"</b><br><b>速度</b><b style='float:right;color: #a19191;'>"+the_speed+"km/h"+"</b><br>"
            +"<b>上下行方向</b><b style='float:right;color: #a19191;'>"+the_updowndir+"</b><br><b>卫星定位模式</b><b style='float:right;color: #a19191;'>"+the_locMode+"</b><br><b>预警目标</b>"
                  +"<b style='float:right;color: #a19191;'>"+target+"</b><br><b>预警距离</b><b style='float:right;color: #a19191;'>"+distance+"m"+"</b><br><b>预警等级</b><b style='float:right;color: #a19191;'>"+(level)+"级"+"</b>")
        }
      }
      )}
      else {
      let Layers = this.layerGroup.locomotiveLayerGroup.getLayers();
      Layers.map(function (layer){
        if(layer.id==data.deviceId)
        {
          layer.bindPopup("<div style='width:301px; bottom: 11px; left: -47px;'><b>机车号</b><b style='float:right;color: #a19191;'>"+that.trainNolist[data.deviceId]+"</b><br><b>速度</b><b style='float:right;color: #a19191;'>"+the_speed+"km/h"+"</b><br>"
            +"<b>上下行方向</b><b style='float:right;color: #a19191;'>"+the_updowndir+"</b><br><b>卫星定位模式</b><b style='float:right;color: #a19191;'>"+the_locMode+"</b><br>")
        }
      }
      )}
      },
      updateTrainPosition(position_1, position_2, deviceId, data ,part_1){
        // if(this.train_lists!=1)
        // {this.selectChanged(deviceId)}
        let iconAnchor = [0,32];
        let that=this
        var imghtml
        var imghtml_2
        if(that.train_data[deviceId].color=='red')
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(4px)translateY(-30px)" src="./train_red.svg"/>';
          imghtml_2 = '<img class="my-div-image_4" style="transform:translateX(-40px)translateY(-30px)rotateY(180deg)" src="./train_red.svg"/>'; 
        }     
        else if(that.train_data[deviceId].color=='orange')
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(4px)translateY(-30px)" src="./train_orange.svg"/>';
          imghtml_2 = '<img class="my-div-image_4" style="transform:translateX(-40px)translateY(-30px)rotateY(180deg)" src="./train_orange.svg"/>'; 
        }  
        else if(that.train_data[deviceId].color=='yellow')
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(4px)translateY(-30px)" src="./train_yellow.svg"/>';
          imghtml_2 = '<img class="my-div-image_4" style="transform:translateX(-40px)translateY(-30px)rotateY(180deg)" src="./train_yellow.svg"/>'; 
        }
        else 
        { 
          imghtml = '<img class="my-div-image_3" style="transform:translateX(4px)translateY(-30px)" src="./train_green.svg"/>';
          imghtml_2 = '<img class="my-div-image_4" style="transform:translateX(-40px)translateY(-30px)rotateY(180deg)" src="./train_green.svg"/>'; 
        }
        if(data.dir==0)
        var myicon = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div  style="width:60' +
            'px;height:60px;z-index:9951">' +
            imghtml +
            '<div class="my-div-span3" style="text-align:center;transform:translateX(-52px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+this.trainNolist[deviceId]+'(方向未知)'+
            "</span></div></div>",
        });
        else
        {          
          var myicon = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div  style="width:60' +
            'px;height:60px;z-index:9951">' +
            imghtml +
            '<div class="my-div-span3" style="text-align:center;transform:translateX(-52px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+this.trainNolist[deviceId]+
            "</span></div></div>",
        });}
        if(data.dir==0)
        var myicon_2 =new L.DivIcon({
   
          className: "my-div-iconl",
          html:
            '<div style="width:60' +
            'px;height:60px;z-index:9951">' +
            imghtml_2 +
            '<div class="my-div-span3" style="text-align:center;transform:translateX(-97px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+this.trainNolist[deviceId]+'(方向未知)'+
            "</span></div></div>",
        }); 
        else var myicon_2 =new L.DivIcon({
   
          className: "my-div-iconl",
          html:
            '<div style="width:60' +
            'px;height:60px;z-index:9951">' +
            imghtml_2 +
            '<div class="my-div-span3" style="text-align:center;transform:translateX(-97px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+this.trainNolist[deviceId]+
            "</span></div></div>",
        }); 
      this.train_data[deviceId].speed=data.speed*3.6/100
      let Layers = this.layerGroup.locomotiveLayerGroup.getLayers();
      Layers.map(function (layer){
        if(layer.id==deviceId)
        {
          
          let Layerss = that.layerGroup.linesLayerGroup.getLayers();
          Layerss[0].getLayers().map(function (item){
            
          if(item.id==position_1)
          if(part_1==item.part)      
          {
          if(data.end1.offset>0)
          var length=data.end1.offset/1000
          else length=0
          if(that.station_rightIsDown[data.coverRoute[data.end1.index].stationNo]==false)
          var length_2=length+0.0001       
          else if(that.station_rightIsDown[data.coverRoute[data.end1.index].stationNo]==true)
          var length_2=length-0.0001       
          var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
          var options = {units: 'kilometers'};
          var the_point= turf.along(item.feature, length, options);
          var the_length=turf.length(item.feature, options);
          var options = {units: 'kilometers'};        
          var the_point= turf.along(item.feature, length, options)
          var the_point_2= turf.along(item.feature, length_2, options);
          if(the_point.geometry.coordinates[1]!=the_point_2.geometry.coordinates[1])
          {
            var bearing
            if(item.feature.properties.dirType==1||item.feature.properties.dirType==2)
            {
              if(item.feature.properties.part=='previous')
                bearing = turf.bearing(the_point, the_point_2)+that.map.getBearing();  
              else bearing = turf.bearing(the_point_2, the_point)+that.map.getBearing();  
            }
            else 
            {
              if(item.feature.properties.part=='previous')
                bearing = turf.bearing(the_point_2, the_point)+that.map.getBearing();  
              else bearing = turf.bearing(the_point,the_point_2 )+that.map.getBearing();  
            }
          }
               
        else{
          if(that.station_rightIsDown[data.coverRoute[data.end1.index].stationNo]==false)
          {
            the_point_2= turf.along(item.feature, the_length, options);
            the_point= turf.along(item.feature, the_length-0.0001, options);
          }
          else if(that.station_rightIsDown[data.coverRoute[data.end1.index].stationNo]==true)
          {
            the_point_2= turf.along(item.feature, the_length, options);
            the_point= turf.along(item.feature, the_length+0.00001, options);
          }
          if(item.feature.properties.dirType==1||item.feature.properties.dirType==2)
            {
              if(item.feature.properties.part=='previous')
                bearing = turf.bearing(the_point, the_point_2)+that.map.getBearing();  
              else bearing = turf.bearing(the_point_2, the_point)+that.map.getBearing();  
            }
            else 
            {
              if(item.feature.properties.part=='previous')
                bearing = turf.bearing(the_point_2, the_point)+that.map.getBearing();  
              else bearing = turf.bearing(the_point,the_point_2 )+that.map.getBearing();  
            }

          }
                // console.log('bearing1 is'+bearing)
                // if(bearing>0)
                // if(bearing%360>180)
                // bearing=bearing-180
                // if(bearing<0)
                // if(bearing%360>-180)
                // bearing=bearing-180
                var new_bearing
                new_bearing=(bearing-90)/57.3
   
                 layer.setRotation(new_bearing);
                 Object.defineProperties(layer, {
  stationid: {
        value: data.stationNo,
        writable:true
    },
    rotate:{
      value:bearing,
      writable:true
    }
});
          layer.setLatLng([the_point.geometry.coordinates[1],the_point.geometry.coordinates[0]]);
   
  
        if(data.dir==2)
        layer.setIcon(myicon_2)
        else layer.setIcon(myicon)
   
        // if(data.upDownDir==1&&(bearing>-90&&bearing<90)) 
        // layer.setIcon(myicon)
        // else if(data.upDownDir==2&&(bearing<-90&&bearing>90)) 
        // layer.setIcon(myicon)
        //   else            
        //   layer.setIcon(myicon_2)

        // if(data.upDownDir==1&&(bearing>-90&&bearing<90))      
        //   layer.set({ icon: myicon });
        // else           
        //   layer.setStyle({ icon: myicon_2 });

          // layer.openPopup();
          }
        })
        }
      }
      )

        if(this.train_lists[1]==deviceId)
        {
          this.selectChanged(deviceId)}



   
      },
      createTrainPosition(position_1, position_2, deviceId, data, part_1){


      if(this.train_data[deviceId]==undefined)
      
      {this.train_data[deviceId]={}
      this.train_data[deviceId].upDownDir=0
      this.train_data[deviceId].speed=0
      }
      this.train_data[deviceId].speed=data.speed*3.6/100

      var imghtml
        var imghtml_2
        if(this.train_data[deviceId].color=='red')
        { 
          imghtml = '<img class="my-div-image_3"  src="./train_red.svg"/>';
          imghtml_2 = '<img class="my-div-image_4"  src="./train_red.svg"/>'; 
        }     
        else if(this.train_data[deviceId].color=='orange')
        { 
          imghtml = '<img class="my-div-image_3"  src="./train_orange.svg"/>';
          imghtml_2 = '<img class="my-div-image_4"  src="./train_orange.svg"/>'; 
        }  
        else if(this.train_data[deviceId].color=='yellow')
        { 
          imghtml = '<img class="my-div-image_3"  src="./train_yellow.svg"/>';
          imghtml_2 = '<img class="my-div-image_4"  src="./train_yellow.svg"/>'; 
        }
        else 
        { 
          imghtml = '<img class="my-div-image_3"  src="./train_green.svg"/>';
          imghtml_2 = '<img class="my-div-image_4"  src="./train_green.svg"/>'; 
        }
      let that=this
      // var layerss=that.layerGroup.signalLayerGroup.getLayers()
      let Layers = this.layerGroup.linesLayerGroup.getLayers();

      //debugger
      Layers[0].getLayers().map(function (item){
        if(item.id==position_1)
        if(part_1==item.part)             
        {
          if(data.end1.offset>0)
          var length=data.end1.offset/1000
          else length=0
          var length_2=length+0.0001       
          var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
          var options = {units: 'kilometers'};
          var the_point= turf.along(item.feature, length, options);
          var the_length=turf.length(item.feature, options);

      let iconSize = [2 * 16 + 16, 16];
      let iconAnchor = [0,32];
      let iconAnchor_2 = [0,32];
      let rotationAngle = 0;
      let rotationOrigin = "";
         var the_point_2= turf.along(item.feature, length_2, options);

        if(the_point.geometry.coordinates[1]!=the_point_2.geometry.coordinates[1])
                var bearing = turf.bearing(the_point, the_point_2);  
        else{
          the_point_2= turf.along(item.feature, the_length, options);
          the_point= turf.along(item.feature, the_length-0.0001, options);
          bearing = turf.bearing(the_point, the_point_2); 
        }
        // if(bearing>0)
        //         if(bearing%360>180)
        //         bearing=bearing-180
        //         if(bearing<0)
        //         if(bearing%360>-180)
        //         bearing=bearing-180
                if(bearing<0)
                bearing=(bearing+90)/57.3
                else bearing=(bearing-90)/57.3
        // that.map.setBearing(bearing);   

      let imghtml = '<img class="my-div-image_3" style="" src="./train.svg"/>';
      let imghtml_2 = '<img class="my-div-image_4" style="" src="./train.svg"/>';      
          var myicon = new L.DivIcon({
          
          className: "my-div-iconl",
          html:
            '<div style="cursor: default;width:60' +
            'px;height:60px;z-index:9951">' +
            imghtml +
            '<div class="my-div-span" style="color:yellow;height:16px;line-height:16px">' +
              '<div class="my-div-span3" style="text-align:center;transform:translateX(-52px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+that.trainNolist[deviceId]+
            "</span></div></div>",
        });
        var myicon_2 =new L.DivIcon({

          className: "my-div-iconl",
          html:
            '<div style="cursor: default;width:60' +
            'px;height:60px;z-index:9951">' +
            imghtml_2 +
            '<div class="my-div-span3" style="text-align:center;transform:translateX(-97px)translateY(-30px);color:yellow;height:15px;line-height:15px;width:160px">' +
            "<span>"+that.trainNolist[deviceId]+
            "</span></div></div>",
        }); 
        if(data.upDownDir==1)      
        {var marker=L.marker(
          [the_point.geometry.coordinates[1],the_point.geometry.coordinates[0]],
          {
            icon: myicon
          }
        )
          .addTo(that.layerGroup.locomotiveLayerGroup)
          .on("click", function (e) {

            e.target.bindPopup("<div style='width:120px'><b>正在查询中……</b></div>",{autoPan:false})   //10.18添加预警查询等待提示

            ;})

     
                
        }
        else         {var marker=L.marker(
          [the_point.geometry.coordinates[1],the_point.geometry.coordinates[0]],
          {
            icon: myicon_2
          }
        )
          .addTo(that.layerGroup.locomotiveLayerGroup)

          .on("click", function (e) {

            e.target.bindPopup("<div style='width:120px'><b>正在查询中……</b></div>",{autoPan:false})   //10.18添加预警查询等待提示



          })




        }
 marker.setRotation(bearing);
                  
Object.defineProperties(marker, {
  stationid: {
        value: data.stationNo,
        writable:true
    },
    rotate:{
      value:bearing,
      writable:true
    },
    id: {
        value: deviceId
    },

});

        }

      })


      },









    //初始化机车
    initLocomotive(data) {
      // let that = this;
      // // var layerss=that.layerGroup.signalLayerGroup.getLayers()
      // let Layers = this.layerGroup.linesLayerGroup.getLayers();
      // Layers[0].getLayers().map(function (item){

      //   if(item.id==data.)
      //   {
      //     var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
      //     console.log(item)
      //     var options = {units: 'kilometers'};
      //     console.log(line)
      //     console.log(item.feature)
      //     var the_length = turf.along(item.feature, 0.001, options);
      //     console.log(the_length)
      //               // item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });
      //   }
      
      // })


      // let log = pointPositionCalc(
      //   113.3253186806,
      //   33.74789592276,
      //   113.32498311279,
      //   33.74790379756,
      //   1000,
      //   2930.3326274353
      // );
      // console.log("坐标:", log);

      // L.marker(log).addTo(this.map);
      
      this.tempGp.tempNode.map(function (item) {
        if (item.myTag && item.myTag == 200) {
          // console.log("layer1:", item);
          // item.setStyle({ color: "black", fillcolor: "black" });
          // console.log("layer11:", item.getLatLngs()[0]);
          // var myMovingMarker = L.Marker.movingMarker(
          //   item.getLatLngs()[0],
          //   [
          //     2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000,
          //     2000, 2000, 2000,
          //   ],
          //   { autostart: true }
          // ).addTo(that.map);
          // myMovingMarker.start();
        } else if (item.myTag && item.myTag == 100) {
          // console.log("layer:", item.getLatLngs()[0]);
          // item.setStyle({ color: "red", fillcolor: "red" });
          // var myMovingMarker = L.Marker.movingMarker(
          //   item.getLatLngs()[0],
          //   [10000, 10000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000],
          //   { autostart: true }
          // ).addTo(that.map);
          // //myMovingMarker.start();
          // that.map.fitBounds(item.getBounds());
          // myMovingMarker.on("move", (res) => {
          //   // 监听点位移动事件 move
          //   //that.map.panTo([res.latlng.lat, res.latlng.lng]); //回调中会返回经纬度信息，点移动改变地图中心点
          //   //path.length > 1 && path.shift(); // 保持数组长度，避免过度push不断重新绘制之前的路径
          //   //path.push([res.latlng.lat, res.latlng.lng]); // 将数据push到数组中
          //   //L.polyline(path, { color: "#20a080", weight: 2 }).addTo(this.map); // 绘制线到地图图层
          // });
        }
      });
    },
    //初始化围栏
    // initEnclosure() {  
    //   let that = this;
    //   listBgeoinfo({ pageSize: 1000 }).then((response) => {
    //     if (response.code === 200) {
    //       that.addGeofencingToMap(
    //         that.layerGroup.geofencingLayerGroup,
    //         response.data.list
    //       );
    //     } else {
    //       that.msgError(response.msg);
    //     }
    //   });
    // },
        initEnclosure() {  
      let that = this;
          // that.addGeofencingToMap(
          //   that.layerGroup.geofencingLayerGroup,
          //   that.testlist
          // );
      
    },
    //初始化人员
    initPersonnel() {},
    //绘制
    drawShape(e, type) {
      let that = this;
      that.closeAllDrawTools(that.drawArr);
      if (e == "Polygon") {
        that.closeDrawToolsStatus(that.drawTools.geofencingOptions, "polygon");

        that.drawTools.polyGeofencing.enabled()
          ? that.drawTools.polyGeofencing.disable()
          : that.drawTools.polyGeofencing.enable();
          that.closeAllDrawTools(that.drawArr);
      } else if (e == "Rectangle") {
        that.closeDrawToolsStatus(
          that.drawTools.geofencingOptions,
          "rectangle"
        );
        that.drawTools.rectGeofencing.enabled()
          ? that.drawTools.rectGeofencing.disable()
          : that.drawTools.rectGeofencing.enable();
      } else if (e == "Circle") {
        that.closeDrawToolsStatus(that.drawTools.geofencingOptions, "circle");
        that.drawTools.circleGeofencing.enabled()
          ? that.drawTools.circleGeofencing.disable()
          : that.drawTools.circleGeofencing.enable();
      } else if (e == "Marker") {
        that.closeDrawToolsStatus(that.drawTools.geofencingOptions, "marker");
        that.drawTools.markerGeofencing.enabled()
          ? that.drawTools.markerGeofencing.disable()
          : that.drawTools.markerGeofencing.enable();
      }
      if (e == "edit") {
        that.closeDrawToolsStatus(that.drawTools.geofencingOptions, "edit");
        if (!that.drawTools.geofencingEdit.enabled()) {
          that.drawTools.editedGeoLayer.length > 0 &&
            that.drawTools.geofencingEdit.revertLayers();
        }
        that.drawTools.geofencingEdit.enabled()
          ? that.drawTools.geofencingEdit.disable()
          : that.drawTools.geofencingEdit.enable();
      }
      if (e == "delete") {
        that.layerGroup.geofencingLayerGroup.off("layerremove");
        if (that.layerGroup.geofencingLayerGroup.getLayers().length > 0) {
          that.closeDrawToolsStatus(that.drawTools.geofencingOptions, "delete");
          that.drawTools.geofencingDel.enabled()
            ? that.drawTools.geofencingDel.disable()
            : that.drawTools.geofencingDel.enable();
        } else {
          layer.msg("没有可以删除的目标");
        }
      }
      if (type == "1") {
        setDrawGeofencingToolTip();
         this.drawTools.measureAreaTool.enable();
        that.drawToolType = "geofencing";
  
      } else {
        setDrawlatlngToolTip();
        that.drawToolType = "pointlng";  
      }
    },
    distanceMeasurement(e) {
      let that = this;
      setMeasureToolTip();
      that.closeAllDrawTools(that.drawArr);
      that.drawToolType = "measure";
      // 测面工具取消激活
      this.closeMeasureTools(
        this.drawTools.measureDisTool,
        this.drawTools.measureAreaTool
      );
      if (e == "measurement") {
        // 测距工具激活
        this.drawTools.measureDisTool.enable();
      } else if (e == "area") {
        // 测面工具激活
        this.drawTools.measureAreaTool.enable();
      } else if (e == "delete") {
        // 测面工具激活
        this.layerGroup.measureLayersGroup.clearLayers();
      }
    },
    /**
     * 添加电子围栏到地图
     * @param {L.FeatureGroup} featureGroup 电子围栏的图层组
     * @param {Array}          geofencing   电子围栏的数组
     */
    initFence(fenceid,type,taskId) {              //初始化加载围栏
      
      getFence(fenceid).then((response)=>{

        
              var fencedata=response.data

      let that=this
      {
  

        {
          var geofencing=fencedata


          // const m = 200;
          // const  n = 5;
          // var fencepoint = new Array(m); // create an empty array of length n
          // for (var i = 0; i < m; i++) {
          //   fencepoint[i] = new Array(n); // make each element an array
          // }
          // fencepoint=''
          // console.log("111")
          // console.log(fencepoint)
                that.fencepoint=[]
                var the_point=[[11,22],[33,44]]
          
          for(var i=0;i<geofencing.points.length;i++)
          {
            that.fencepoint[i]=[]
            that.fencepoint[i].push(geofencing.points[i].latitude)
            that.fencepoint[i].push(geofencing.points[i].longitude)     
          }
          that.fencepoint.length=geofencing.points.length
          // debugger
  
          if(geofencing.fence_type==0)
            {
              var task_type_list={
                '0':'普通任务',
                '1':'工务施工',
                '2':'电务施工',
                '3':'巡道作业',
                '4':'列检作业',
              }
              var task_state_list={
                '0':'草稿',
                '1':'创建（待审核）',
                '2':'审核中',
                '3':'已批准',
                '4':'已拒绝(待审核)',
                '5':'进行中',
                '6':'已结束',
                '7':'已销毁',
              }
              var the_fence_type=(geofencing.fence_type==0)?'封闭围栏':'开放围栏'
              var begintime=new Date(that.task_fence[taskId].begintime)
              begintime=begintime.getFullYear()+'-'+(begintime.getMonth()+1)+'-'+begintime.getDate()+'  '+begintime.getHours()+':'+begintime.getMinutes()
              var endtime=new Date(that.task_fence[taskId].endtime)
              endtime=endtime.getFullYear()+'-'+(endtime.getMonth()+1)+'-'+endtime.getDate()+'  '+endtime.getHours()+':'+endtime.getMinutes()
              var the_type=task_type_list[that.task_fence[taskId].type]
              var the_state=task_state_list[that.task_fence[taskId].state]
              var marker=L.polygon(that.fencepoint,{
                color: "red",
                opacity: true,
                dashArray: "20",
                attribution: geofencing,
              })
                .addTo(this.layerGroup.geofencingLayerGroup)
                   .on("click", function (e) {

            if(taskId!=-1)
              e.target.bindPopup("<div style='width:301px; bottom: 11px; left: -47px;'><b>任务ID</b><b style='float:right;color: #a19191;'>"+taskId+"</b><br><b>施工任务</b><b style='float:right;color: #a19191;'>"+the_type+"</b><br>"
            +"<b>开始时间</b><b style='float:right;color: #a19191;'>"+begintime+"</b><br>"+"<b>结束时间</b><b style='float:right;color: #a19191;'>"+endtime+"</b><br>"+"<b>围栏ID</b><b style='float:right;color: #a19191;'>"+geofencing.fence_id+"</b><br><b>施工状态</b>"
                  +"<b style='float:right;color: #a19191;'>"+the_state+"</b><br><b>围栏类型</b><b style='float:right;color: #a19191;'>"+the_fence_type+"</b><br></div>")
          });



            // e.target.closePopup();
            Object.defineProperties(marker, {
            fence_id: {
              value: fenceid
            }
              });

          }
          else            
          {
            
  
            var task_type_list={
                '0':'普通任务',
                '1':'工务施工',
                '2':'电务施工',
                '3':'巡道作业',
                '4':'列检作业',
              }
              var task_state_list={
                '0':'草稿',
                '1':'创建（待审核）',
                '2':'审核中',
                '3':'已批准',
                '4':'已拒绝(待审核)',
                '5':'进行中',
                '6':'已结束',
                '7':'已销毁',
              }
              var the_fence_type=(geofencing.fence_type==0)?'封闭围栏':'开放围栏'
              var begintime=new Date(that.task_fence[taskId].begintime)
              begintime=begintime.getFullYear()+'-'+(begintime.getMonth()+1)+'-'+begintime.getDate()+'  '+begintime.getHours()+':'+begintime.getMinutes()
              var endtime=new Date(that.task_fence[taskId].endtime)
              endtime=endtime.getFullYear()+'-'+(endtime.getMonth()+1)+'-'+endtime.getDate()+'  '+endtime.getHours()+':'+endtime.getMinutes()
              var the_type=task_type_list[that.task_fence[taskId].type]
              var the_state=task_state_list[that.task_fence[taskId].state]
              var marker=L.polygon(that.fencepoint,{
                color: "green",
                opacity: true,
                dashArray: "20",
                attribution: geofencing,
              })
                .addTo(this.layerGroup.geofencingLayerGroup)
                   .on("click", function (e) {
          
                    if(taskId!=-1)
              e.target.bindPopup("<div style='width:301px; bottom: 11px; left: -47px;'><b>任务ID</b><b style='float:right;color: #a19191;'>"+taskId+"</b><br><b>施工任务</b><b style='float:right;color: #a19191;'>"+the_type+"</b><br>"
                +"<b>开始时间</b><b style='float:right;color: #a19191;'>"+begintime+"</b><br>"+"<b>结束时间</b><b style='float:right;color: #a19191;'>"+endtime+"</b><br>"+"<b>围栏ID</b><b style='float:right;color: #a19191;'>"+geofencing.fence_id+"</b><br><b>施工状态</b>"
                  +"<b style='float:right;color: #a19191;'>"+the_state+"</b><br><b>围栏类型</b><b style='float:right;color: #a19191;'>"+the_fence_type+"</b><br></div>")
          });

          Object.defineProperties(marker, {
            fence_id: {
          value: fenceid
            }
              });
          }
        
        

          var myicon = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div style="width:60' +
            'px;height:16px;">' +
            '<div id="SignalA"'+            
            ' style="border-radius: 50% ;width: 8px ;display: inline-block;height: 8px ;background-color:red"></div>'+
            "</div>",
        });

        var myicon_2 = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div style="width:60' +
            'px;height:16px;">' +
            '<div id="SignalA"'+            
            ' style="border-radius: 50% ;width: 8px ;display: inline-block;height: 8px ;background-color:red"></div>'+
            "</div>",
        });
     


          
        // map.fitBounds(featureGroup.getBounds());
        for (const i in geofencing.cross_points){
                
      // var layerss=that.layerGroup.signalLayerGroup.getLayers()
      let Layers = this.layerGroup.linesLayerGroup.getLayers();
                var part_1;
          if(geofencing.cross_points[i].switch_part==1)
          part_1='previous' 
          else if(geofencing.cross_points[i].switch_part==2)
          part_1='normal'
          else if(geofencing.cross_points[i].switch_part==3)
          part_1='reverse' 
          else part_1='track'
      Layers[0].getLayers().map(function (item){ 
          // console.log('1')
          // debugger
          var id='S'+geofencing.cross_points[i].station_no+'_'+geofencing.cross_points[i].track_no;  
          // console.log(part_1+' '+item.part+' '+geofencing.cross_points[i].switch_part)      
        if(item.fenceid==id)
          if(part_1==item.part||part_1=='track')
        {
          if(geofencing.cross_points[i].distance_in_track>0)
          var length=geofencing.cross_points[i].distance_in_track/100000
          else length=0       
          var options = {units: 'kilometers'};
          var inf=item.id+' '+geofencing.cross_points[i].distance_in_track/100+'米处'
          var the_point= turf.along(item.feature, length, options);
          var myicon = new L.DivIcon({
          className: "my-div-iconl",
          html:
            '<div style="width:60' +
            'px;height:16px;">' +
            "</div>",
        });
        var marker=L.marker(
          [the_point.geometry.coordinates[1],the_point.geometry.coordinates[0]],
          {
            icon: myicon,
          }
        )
          .addTo(that.layerGroup.geofencingLayerGroup)
          .bindTooltip(inf)
          .on("mouseover",function (e) {
            marker.openTooltip()
          })
          // console.log(this.layerGroup.geofencingLayerGroup.getLayers())
          Object.defineProperties(marker, {
            fence_id: {
          value: fenceid
            }
              });
        }
      })
      }
        }
      }

    }).catch(error => {
          if(error.message.includes('timeout')){
              this.requestState=true
          }  
          })
    },


    deletefence(id)
    {
      let that=this
      
      
      let Layers = this.layerGroup.geofencingLayerGroup.getLayers();

      Layers.map(function (layer){

        if(layer.fence_id==id)
        that.layerGroup.geofencingLayerGroup.removeLayer(layer)
      })
    },






    cancelDialog(dgtype) {
      if (dgtype == "geoDialog") {
        this.geoDialog = false;
        this.drawTools.geofencingEdit.disable();
      } else if (dgtype == "linesDialog") {
        this.linesDialog = false;
      } else if (dgtype == "locomotiveDialog") {
        this.locomotiveDialog = false;
      } else if (dgtype == "persionDialog") {
        this.persionDialog = false;
      }
    },
    confirmDialog(dgtype) {
        let that=this

                    that.fencepoint=[]
                var the_point=[[11,22],[33,44]]
          for(var i=0;i<that.data_pointsfence[0].length;i++)
          {
            that.fencepoint=[]
            that.fencepoint[i].push(that.data_pointsfence[0][i].lng)
            that.fencepoint[i].push(that.data_pointsfence[0][i].lat)     
          }
          that.fencepoint.length=that.data_pointsfence[0].length



          var data={
          "fence_type":1,
          "points":[[]]
          }
 
          if(that.formData.geoType==1)
          data.fence_type=0
          else data.fence_type=1
          data.points=that.fencepoint      
   
          postfencePoints(data).then((response)=>{
   
            this.initFence(response.data,2,-1)
          })

      that.geoDialog = false;
    },
    lineQuery() {
      this.linesDialog = true;
    },
    locomotiveTrack() {
      this.locomotiveDialog = true;
    },
    personnelTrack() {
      this.persionDialog = true;
    },
    /**
     * 关闭围栏绘制状态：显示、多边形、矩形、圆形、编辑、删除
     * @param  {Object} options JSON对象
     * @param  {String} type    几何类型
     * @return {undefined}      无返回值
     */
    closeDrawToolsStatus(options, type) {
      if (!options) {
        return;
      }
      if (options.polygon && type != "polygon") {
        options.polygon.obj && options.polygon.obj.disable();
      }
      if (options.rectangle && type != "rectangle") {
        options.rectangle.obj && options.rectangle.obj.disable();
      }
      if (options.circle && type != "circle") {
        options.circle.obj && options.circle.obj.disable();
      }
      if (options.edit && type != "edit") {
        options.edit.editLayer.length > 0 && options.edit.obj.revertLayers();
        options.edit.obj && options.edit.obj.disable();
      }
      if (options.delete && type != "delete") {
        options.delete.deleteLayer.off("layerremove");
        options.delete.obj && options.delete.obj.disable();
      }
    },
    /**
     * 关闭测量工具：测距、测面
     * @param  {L.Draw.Polyline} distanceTool 测距工具
     * @param  {L.Draw.Polygon}  areaTool     测面工具
     * @return {undefined}                    无返回值
     */
    closeMeasureTools(distanceTool, areaTool) {
      if (distanceTool instanceof L.Draw.Polyline) {
        distanceTool.disable();
      }
      if (areaTool instanceof L.Draw.Polygon) {
        areaTool.disable();
      }
      this.map.doubleClickZoom.disable();
    },
    /**
     * 关闭所有绘制工具：测量、物资查询、编辑围栏、编辑仓库、编辑单元
     * @param  {Array} drawArr 绘制工具数组
     * @return {undefined}     无返回值
     */
    closeAllDrawTools(drawArr) {
      if (drawArr && drawArr.length > 0) {
        for (var i = drawArr.length - 1; i >= 0; i--) {
          if (drawArr[i] instanceof L.EditToolbar.Edit) {
            drawArr[i].options.featureGroup.getLayer() > 0 &&
              drawArr[i].revertLayers();
          }
          drawArr[i].disable();
        }
      }
    },
    pointcancel() {
      this.linesDialog = false;
    },
    pointClick(item) {
      if (item.adcode == "100000") {
        this.map.setView([item.y, item.x], 11);
      } else {
        this.map.setView([item.y, item.x], 19);
      }
    },
    //geojson 回调函数
    onEachFeature(feature, layer) {
      let that = this;
      this.station_list.push({key:feature.properties.stationId,value:feature.properties.name})
      layer.id='S'+feature.properties.stationId+'_'+feature.properties.name;
      layer.fenceid='S'+feature.properties.stationId+'_'+feature.properties.id;
      layer.postfenceid=feature.properties.id;
      layer.stationid=feature.properties.stationId;
      layer.name=feature.properties.name;
      layer.trackName=feature.properties.trackName;
      
      layer.part=feature.properties.part;
      layer.myTag = feature.properties.osm_id;
      layer.mawei = feature.
      properties.mawei;
      layer.cdno = feature.properties.cdno;
      layer.long = feature.properties.long;

    },
    //小线段样式
    sizelinesStyle(feature) {
      return {
        fillColor: "white",
        weight: 1,
        color: "white",
        lineJoin: "bevel",
        lineCap: "butt",
      };
    },
    //大线段样式
    biglinesStyle(feature) {
      return {
        fillColor: "#556497",
        weight: 1,
        //fill:true,
        //opacity: 1,
        color: "#556497",
        //dashArray: "15, 10, 5, 10",
        // fillOpacity: 0.7,
        lineJoin: "bevel",
        lineCap: "butt",
      };
    },
    //改变某个围栏图层圈颜色
    changeGeofencingLayer(featureGroup, geoId) {
      if (featureGroup instanceof L.FeatureGroup) {
        featureGroup.eachLayer(function (layer) {
          layer.bindPopup("Hello");
        });
      }
    },
    getConfigResult(res) {
    },
    //改变某个人员标识颜色
    //改变某个信号灯图层颜色
    //改变某个线图层颜色
    //窗口变化
    changeDivHeight() {
      var h = document.body.clientHeight; //获取页面可见高度
      document.getElementById("map-container").style.height =
       h - 76 - 17 + "px";
      // 每次窗口大小改变后调用这个方法
      this.map.invalidateSize(true);
    },
    randColor() {
      let colors = ["red", "blue", "green", "black"];
      let idx = Math.ceil(Math.random() * 4);
      return colors[idx - 1];
    },
    // 角度划定在(-180，180]
    calcAngle(degree) {
      if (degree > 180) {
        return degree - 360;
      } else if (degree <= -180) {
        return degree + 360;
      }
      return degree;
    },
    getVerticalLine(startPt, endPt, halfLength, isVerticalPointAtStart) {
      let pt1 = point(startPt);
      let pt2 = point(endPt);
      let lineAngle = bearing(pt1, pt2);
      let startAngle = this.calcAngle(lineAngle + 90);
      let endAngle = this.calcAngle(lineAngle - 90);
      let verticalPoint = isVerticalPointAtStart ? pt1 : pt2;
      let first = destination(verticalPoint, halfLength * 0.001, startAngle, {
        units: "kilometers",
      });
      let last = destination(verticalPoint, halfLength * 0.001, endAngle, {
        units: "kilometers",
      });
      let lineDetail = {};
      lineDetail.line = lineString([
        first.geometry.coordinates,
        verticalPoint.geometry.coordinates,
        last.geometry.coordinates,
      ]);
      let antiLineAngle = this.calcAngle(lineAngle + 180);
      lineDetail.rl = destination(first, halfLength * 0.001, lineAngle, {
        units: "kilometers",
      });
      lineDetail.ru = destination(last, halfLength * 0.001, lineAngle, {
        units: "kilometers",
      });
      lineDetail.ll = destination(first, halfLength * 0.001, antiLineAngle, {
        units: "kilometers",
      });
      lineDetail.lu = destination(last, halfLength * 0.001, antiLineAngle, {
        units: "kilometers",
      });
      lineDetail.right = lineAngle;
      lineDetail.left = antiLineAngle;
      lineDetail.up = endAngle;
      lineDetail.down = startAngle;

      return lineDetail;
    },
    produceLight(lightLayer, lightArray, lsDetail, location, label) {
      let imghtml = "";
      for (const light of lightArray) {
        imghtml +=
          '<img class="my-div-image" style="" src="./' + light + '.png"/>';
      }
      let iconSize = [lightArray.length * 16 + 16, 16];
      let iconAnchor = [];
      let rotationAngle = 0;
      let rotationOrigin = "";
      switch (location) {
        case "lu":
          iconAnchor = [0, -2];
          rotationAngle = lsDetail.left - 90;
          rotationOrigin = "top left";
          break;
        case "ru":
          iconAnchor = [0, 16];
          rotationAngle = lsDetail.right - 90;
          rotationOrigin = "bottom left";
          break;
        case "ll":
          iconAnchor = [0, 16];
          rotationAngle = lsDetail.left - 90;
          rotationOrigin = "bottom left";
          break;
        case "rl":
          iconAnchor = [0, 0];
          rotationAngle = lsDetail.right - 90;
          rotationOrigin = "top left";
          break;
      }

      let myicon = new L.DivIcon({
        className: "my-div-iconl",
        iconSize: iconSize,
        iconAnchor: iconAnchor,
        html:
          '<div style="width:' +
          iconSize[0] +
          'px;height:16px;">' +
          imghtml +
          '<div class="my-div-span" style="color:white;height:16px;line-height:16px">' +
          label +
          "</div></div>",
      });
      let point = lsDetail[location];
      if (point) {
        L.marker([...point.geometry.coordinates].reverse(), {
          icon: myicon,
          rotationAngle: rotationAngle,
          // rotationOrigin: rotationOrigin,
        }).addTo(lightLayer);
      }
    },

      renderOneStationDevices(data,props) {
        
        try {
          for(const key in data.tracks)
          {
            this.updateLines(props.stationNo,key,data.tracks[key],props)
          }
          // 信号机
          for (const key in data.signals) {


            this.signalRender(props.stationNo,key,data.signals[key],props)
          }
          for (const key in data.switchs) {
            this.updateLines(props.stationNo,key,data.switchs[key],props)
          }
          // 区段
          for (const key in data.trackStates) {
            const deviceObj = this.variables[props.stationNo][2][`S${props.stationNo}_${key}`]
            if (deviceObj) {
              deviceObj.value = data.trackStates[key]
              this.trackRender(deviceObj.svg, deviceObj.value)
            } else {
 
            }
          }
        } catch (error) {
          console.log(error)
        }
      },


      addToCart(data){

        if(this.lines_list.includes(data))
        {}
        else this.lines_list.push(data)

      },

      deleteCart(data){
        var i=0
        for(i;i<this.lines_list.length;i++)
        {
          if(this.lines_list[i]==data)    
          {
            this.lines_list.splice(this.lines_list.indexOf(data),1)
          }    
        }     
      },

      renderSingleDevice(data) {
        try {

          for (const s of data.devices) {

            if (s.dtype === 'track') {
              this.updateLines(data.stationNo, s.dname, s.dstate)
            } else if (s.dtype === 'switch') {
              this.updateLines(data.stationNo, s.dname, s.dstate)
            } else {
              this.signalRender(data.stationNo, s.dname, s.dstate)
            }
          }
        } catch (error) {
          console.log(error)
        }
      },

    updateLines(stationNo, name, state)
    {
      
   let Layers = this.layerGroup.linesLayerGroup.getLayers();
      Layers[0].getLayers().map(function (item){
        
        var id='S'+stationNo+'_'+name
        var occupy=state%2
        var lock=state%4/2
        var type=state/16
        if(item.id==id)
        {
          
          
          if(item.part==('normal')||item.part==('reverse')||item.part==('previous'))
          {
            if(type>=1)
            {
              if(item.part!='normal')
              {
           if(occupy>=1)
            item.setStyle({ color: "red", fillcolor: "red" });
          else if(lock>=1)
            item.setStyle({ color: "white", fillcolor: "white" });
            else item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });                 
              }else item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });  
            }
            else{
              if(item.part!='reverse')
              {
           if(occupy>=1)
           item.setStyle({ color: "red", fillcolor: "red" });
            
          else if(lock>=1)
            item.setStyle({ color: "white", fillcolor: "white" });
  
            else item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });              
              }else item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });
            }
          
          }
          else if(occupy>=1)
            item.setStyle({ color: "red", fillcolor: "red" });

          else if(lock>=1)
            item.setStyle({ color: "white", fillcolor: "white" });
       

          else item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });
                    // item.setStyle({ color: "#3388ff", fillcolor: "#3388ff" });
          if(state==-1)
          item.setStyle({ color: "grey", fillcolor: "grey" });
        }
      
      })



    },






        signalRender(stationNo, name, state) {

        let type
        var current_svg='#S' + stationNo+'_'+name

        if(d3.select(current_svg)._groups[0][0]==null)
        return
        type=d3.select(current_svg).attr('type')

        let colorState, isBlink

        if (state & MASK_LAMP_CLOSE) {
          colorState = 0
          isBlink = false
          this.oneSignalRender(current_svg, colorState, isBlink, 'A')
          if (type === 'signal2') {
            this.oneSignalRender(current_svg, colorState, isBlink, 'B')
          }
        } else {
          colorState = state & MASK_LAMPA_COLOR
          if (state & MASK_LAMPA_BLINK) {
            isBlink = true
          } else {
            isBlink = false
          }
          this.oneSignalRender(current_svg, colorState, isBlink, 'A')
          if (type === 'signal2') {
            colorState = state/16 & (MASK_LAMPA_COLOR )
            if (state & MASK_LAMPB_BLINK) {
              isBlink = true
            } else {
              isBlink = false
            }
            this.oneSignalRender(current_svg, colorState, isBlink, 'B')
          }
        }
      },
      oneSignalRender(current_svg, colorState, isBlink, code) {       
        for (const c of colorClassArray) {
          d3.select(current_svg).classed(code + c, false)
        }

        d3.select(current_svg).classed(code + colorClassArray[colorState], true)
        if (isBlink) {
          d3.select(current_svg).classed(code + 'Blink', true)
        } else {
          d3.select(current_svg).classed(code + 'Blink', false)
        }
      },
  },

  directives: {
  drag: function(el) {
    let dragBox = el; //获取当前元素
    let imgMakeBox;//父盒子
    let moveW = 0;//移动元素的width
    let moveH = 0; //移动元素的height
    let parentW = 0;//父盒子的width
    let parentH = 0;//父盒子的height
    dragBox.onmousedown = e => {
      imgMakeBox = document.getElementById('box'); // 获取父元素
      moveW = dragBox.offsetWidth;
      moveH = dragBox.offsetHeight;
      parentW = imgMakeBox.offsetWidth;//父盒子的width
      parentH = imgMakeBox.offsetHeight;//父盒子的height
      //算出鼠标相对元素的位置
      let disX = e.clientX - dragBox.offsetLeft;
      let disY = e.clientY - dragBox.offsetTop;
      document.onmousemove = e => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        let resW = parentW - moveW;//父盒子宽减去移动盒子的宽 = 最大可移动的区域
        let resH = parentH - moveH;//父盒子高减去移动盒子的高 = 可最大移动的区域
        left = left >= resW ? resW : left <= 0 ? 0 : left;
        top = top >= resH ? resH : top <= 0 ? 0 : top;
        //移动当前元素
        dragBox.style.left = left + "px";
        dragBox.style.top = top + "px";
      };
      document.onmouseup = e => {
        //鼠标弹起来的时候不再移动
        document.onmousemove = null;
        //预防鼠标放上去的时候还会移动
        document.onmouseup = null;
      };
    };
  },
},

};



</script>
<style lang="less">

.just-click {
  cursor: pointer;
  width: 100px;
  height: 40px;
  position: fixed;
  background: white;
  color: black;
  line-height: 40px;
  text-align: center;
}
.multi-dialog {
  z-index: 9935;
  position: fixed;
  background: rgba(0,93,172,0.75);
  box-shadow: 0px 0px 12px rgba(0,186,255,0.5);

  font-size: 14px;
}
.multi-dialog-title {
  padding: 20px;
  border: 1px solid rgba(0,93,172,0.75);
  border-top: 2px solid rgba(127,255,255);
  cursor: move;
  font-size: 18px;
}
.multi-dialog-content {
  padding: 10px;
}

.map-container {
  width: 100%;
  height: calc(100%)!important;
  z-index: 1;
  margin: auto;

  #map-container {
    width: 100%;
    height: calc(100%)!important;
    z-index: 1;
    margin: auto;
    height: 550px;
    //background-color: black;
    background: #041840;
  }
}
.position-container{
    width:30px;
    height:30px;top:50px;position: absolute;left: 11.5px;
  }

  .position-container_2{
    width:30px;
    height:30px;top:100px;position: absolute;left: 11.5px;
  }
@media screen and (max-width: 500px) {
  
  .position-container{
    width:30px;
    height:30px;bottom: 10px;position: fixed;right: 8px;top:auto;left:auto;
  }

  .map-container {
  width: 100%;
  height: calc(100%)!important;
  z-index: 1;
  margin: auto;

  #map-container {
    width: 100%;
    height: calc(100%)!important;
    z-index: 1;
    margin: auto;
    height: 550px;
    //background-color: black;
    background: #041840;
  }
}
  .el-message {
    min-width: 300px !important;
  }
}
@media screen and (max-width: 500px) {
  .el-message-box {
    width: 300px !important;
  }
}
@media screen and (max-width: 500px) {
  .el-dialog__wrapper .el-dialog {
    width: 300px !important;
    .el-dialog__body {
      padding: 10px 20px !important;
      .el-form-item__label {
        width: 68px !important;
      }
      .el-select,
      .el-input {
        width: 180px !important;
      }
    }
  }
}
</style>
<style  lang="less">
  @red: #f00;
  @green: #0f0;
  @yellow: #ff0;
  @white: #fff;
  @blue: #00f;
  @gray: #808080;
  @noneGray: #404040;
  @trackFreeBlue: #5578b6;


  @keyframes signalBlink {
    0% {
      opacity: 1;
    }
    60% {
      background-color: @noneGray;
      stroke: @noneGray;
    }
    100% {
      background-color: @noneGray;
      stroke: @noneGray;
    }
  }

  @keyframes switchBlink {
    0% {
      opacity: 1;
    }
    60% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes workAreaBlink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .track.Occupy {
    #track {
      stroke: @red;
    }
  }
  .track.Free {
    #track {
      stroke: @trackFreeBlue;
    }
  }
  .track.Lock {
    #track {
      stroke: @white;
    }
  }
  .track.None {
    #track {
      stroke: @noneGray;
    }
  }
      .trail-box {
        display: flex;
        align-items: center;
        color:#fff;
        width: 215px;
        // background-color: yellow;
      }
  .switch.Normal {
    #switchLabel {
      fill: @green;
    }
    #switchNormal {
      stroke-opacity: 1;
    }
    #switchReverse {
      stroke-opacity: 0;
    }
  }
  .switch.Normal.Free {
    #common {
      stroke: @trackFreeBlue;
    }
    #switchNormal {
      stroke: @trackFreeBlue;
    }
    #normal {
      stroke: @trackFreeBlue;
    }
    #reverse {
      stroke: @trackFreeBlue;
    }
  }
  .switch.Normal.Occupy {
    #common {
      stroke: @red;
    }
    #switchNormal {
      stroke: @red;
    }
    #normal {
      stroke: @red;
    }
    #reverse {
      stroke: @trackFreeBlue;
    }
  }
  .switch.Normal.Lock {
    #common {
      stroke: @white;
    }
    #switchNormal {
      stroke: @white;
    }
    #normal {
      stroke: @white;
    }
    #reverse {
      stroke: @trackFreeBlue;
    }
  }
  .switch.Reverse {
    #switchLabel {
      fill: @yellow;
    }
    #switchNormal {
      stroke-opacity: 0;
    }
    #switchReverse {
      stroke-opacity: 1;
    }
  }
  .switch.Reverse.Free {
    #common {
      stroke: @trackFreeBlue;
    }
    #switchReverse {
      stroke: @trackFreeBlue;
    }
    #reverse {
      stroke: @trackFreeBlue;
    }
    #normal {
      stroke: @trackFreeBlue;
    }
  }
  .switch.Reverse.Occupy {
    #common {
      stroke: @red;
    }
    #switchReverse {
      stroke: @red;
    }
    #reverse {
      stroke: @red;
    }
    #normal {
      stroke: @trackFreeBlue;
    }
  }
  .switch.Reverse.Lock {
    #common {
      stroke: @white;
    }
    #switchReverse {
      stroke: @white;
    }
    #reverse {
      stroke: @white;
    }
    #normal {
      stroke: @trackFreeBlue;
    }
  }
  .switch.SiKai {
    #switchLabel {
      fill: @white;
      animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
    }
    #switchNormal,
    #switchReverse {
      stroke-opacity: 0;
    }
    #common {
      stroke: @trackFreeBlue;
    }
    #reverse {
      stroke: @trackFreeBlue;
    }
    #normal {
      stroke: @trackFreeBlue;
    }
  }



  .ANone {
    #SignalBase {
      stroke: @noneGray;
    }
    #SignalA {
      background-color: @noneGray;
      fill: @noneGray;
    }
  }
  .ARed {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      background-color: @red;
      fill: @red;
    }
  }
  .AGreen {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      background-color: @green;
      fill: @green;
    }
  }
  .AYellow {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      background-color: @yellow;
      fill: @yellow;
    }
  }
  .AWhite {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      background-color: @white;
      fill: @white;
    }
  }
  .ABlue {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      background-color: @blue;
      fill: @blue;
    }
  }
  .AGray {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      background-color: @gray;
      fill: @gray;
    }
  }
  .signal2.ANone {
    #SignalBase {
      stroke: @noneGray;
    }
    #SignalA {
      stroke: @noneGray;
      fill: @noneGray;
    }
  }
  .signal2.ARed {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      stroke: @red;
      fill: @red;
    }
  }
  .signal2.AGreen {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      stroke: @green;
      fill: @green;
    }
  }
  .signal2.AYellow {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      stroke: @yellow;
      fill: @yellow;
    }
  }
  .signal2.AWhite {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      stroke: @white;
      fill: @white;
    }
  }
  .signal2.ABlue {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      stroke: @blue;
      fill: @blue;
    }
  }
  .signal2.AGray {
    #SignalBase {
      stroke: @gray;
    }
    #SignalA {
      stroke: @gray;
      fill: @gray;
    }
  }
  .BNone {
    #SignalBase {
      stroke: @noneGray;
    }
    #SignalB {
      background-color: @noneGray;
      fill: @noneGray;
    }
  }
  .BRed {
    #SignalBase {
      stroke: @gray;
    }
    #SignalB {
      background-color: @red;
      fill: @red;
    }
  }
  .BGreen {
    #SignalBase {
      stroke: @gray;
    }
    #SignalB {
      background-color: @green;
      fill: @green;
    }
  }
  .BYellow {
    #SignalBase {
      stroke: @gray;
    }
    #SignalB {
      background-color: @yellow;
      fill: @yellow;
    }
  }
  .BWhite {
    #SignalBase {
      stroke: @gray;
    }
    #SignalB {
      background-color: @white;
      fill: @white;
    }
  }
  .BBlue {
    #SignalBase {
      stroke: @gray;
    }
    #SignalB {
      background-color: @blue;
      fill: @blue;
    }
  }
  .BGray {
    #SignalBase {
      stroke: @gray;
    }
    #SignalB {
      background-color: @gray;
      fill: @gray;
    }
  }
  .ABlink {
    #SignalA {
      animation: signalBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
    }
  }
  .signal2.ABlink {
    #SignalA {
      animation: signalBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
    }
  }
  .BBlink {
    #SignalB {
      animation: signalBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
    }
  }
.my-div-icon {
  font-size: 40px;
  color: white;
  width: 120px;
}
.my-div-image {
  width: 12px;
  height: 12px;
}
.my-div-image_2 {
  width: 32px;
  height: 32px;
}

.my-div-image_7 {
  width: 20px;
  height: 20px;
}



.my-div-image_3 {
  fill: #00f;
  width: 45px;
  height: 45px;
}

.my-div-image_4 {
  fill: #00f;
  -webkit-transform:rotateY(180deg);
  width: 45px;
  height: 45px;
}

.my-div-span {
  font-size: 12px;
}

.my-div-span2 {
  font-size: 15px;
}

.my-div-span3 {
  font-size: 18px;
}



.leaflet-popup{
  bottom:20px!important;
}
</style>



